logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-18-2011, 10:36 AM   #1
dcbradle
 
Join Date: Oct 2011
Posts: 2
Default 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:



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
dcbradle is offline   Reply With Quote
Old 10-18-2011, 11:45 AM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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.
Corrosive is offline   Reply With Quote
Old 10-18-2011, 01:30 PM   #3
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

217px is the length of the whole bar?
domedia is offline   Reply With Quote
Old 10-18-2011, 01:38 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by domedia View Post
217px is the length of the whole bar?
I'm sure that's the length of the dropdown ul which holds the submenus.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-18-2011, 04:09 PM   #5
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Quote:
Originally Posted by dcbradle View Post
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 View Post
217px is the length of the whole bar?
Quote:
Originally Posted by gentleone View Post
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.
domedia is offline   Reply With Quote
Old 10-18-2011, 04:31 PM   #6
dcbradle
 
Join Date: Oct 2011
Posts: 2
Default

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
dcbradle is offline   Reply With Quote
Old 10-18-2011, 08:22 PM   #7
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:13 AM.


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