PDA

View Full Version : Horizontal Menu length appears different in different browser


dcbradle
10-18-2011, 10:36 AM
I created a horizontal spry menu bar on my website and got it looking great in IE, however when I view the site in Safari or Firefox the length of it appears different.

I have created an image showing the screenshots from the 3 browsers:

http://www.gddigital.co.uk/menu_screenshot.jpg

I have also included some of code from my CSS which I think refers to the area that deals with the length of the whole bar and individual menu items:

ul.MenuBarHorizontal li
{
margin: 0 3px 0 0;
padding: 0 0 0 0;
list-style-type: none;
font-size: 12px;
line-height:20px;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
left: 0;
}

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
line-height:6px;
z-index: 1020;
cursor: default;
width: 217px;
float: none;
position: absolute;
left: -1000em;
}

Thanks

Corrosive
10-18-2011, 11:45 AM
This is a difficult one and something I have struggled with recently with getting menu lengths to look identical in all. I just opted for compromise in the end.

domedia
10-18-2011, 01:30 PM
217px is the length of the whole bar? ;-)

gentleone
10-18-2011, 01:38 PM
217px is the length of the whole bar? ;-)
I'm sure that's the length of the dropdown ul which holds the submenus.

domedia
10-18-2011, 04:09 PM
I have also included some of code from my CSS which I think refers to the area that deals with the length of the whole bar and individual menu items:

217px is the length of the whole bar? ;-)

I'm sure that's the length of the dropdown ul which holds the submenus.

My point exactly. There should be little problem getting this bar to look right.

dcbradle
10-18-2011, 04:31 PM
I could not remember what the width: 217px referred to. So I commented out and it only made a difference in IE, but only to the dropdown menus (the went vertical instead of horizontal, nothing happen with the main naviagtion, so this has nothing to do with the main nav bar.

Thanks

DWcourse
10-18-2011, 08:22 PM
In a Spry menu, setting the width of ul.MenuBarHorizontal li to auto causes problems because there can be slight variations between how browsers figure that (and will probably cause issues when a user resizes type onscreen). If you set the menu (ul.MenuBarHorizontal) to a pixel width and use pixel widths for the menu items (ul.MenuBarHorizontal li), you can make things work. But, in your case you'll need to create a custom class for each menu item since they are all different widths. And be careful. You really shouldn't be adding margin or padding to the list items. The margin and padding should be handled in the style rule for the links.

There are other work arounds as well such as not worrying about it and setting the menu over a matching background so that your gradient fills the full width even if your menu doesn't.