Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Horizontal Menu length appears different in different browser (http://www.dreamweaverclub.com/forum//showthread.php?t=41808)

dcbradle 10-18-2011 10:36 AM

Horizontal Menu length appears different in different browser
 
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

Quote:

Originally Posted by domedia (Post 200008)
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

Quote:

Originally Posted by dcbradle (Post 199994)
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:

Quote:

Originally Posted by domedia (Post 200008)
217px is the length of the whole bar? ;-)

Quote:

Originally Posted by gentleone (Post 200009)
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.


All times are GMT. The time now is 05:49 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com