Sign in to follow this  
benryves

[web] Firefox and CSS woes

Recommended Posts

I'm using some CSS-powered dropdown menus (Suckerfish-style). They work fine in Opera and IE, but (unsurprisingly) not in Firefox. The menus are sent as a standard bulleted list. The problem is that to get the root of the menu to appear all on one line, I'm using this:
#nav li {
    float: left;
}
IE and Opera only apply the style to the root. However, Firefox appears to apply this to everything - so my dropdowns are horizontal on everything. If I remove the float:left line, the menus are correct(-ish), bar the fact that the root is now split onto multiple lines, rather than all on one. My stylesheet is:
#nav, #nav ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	line-height: 1;
    font-size: 12px;
}


#nav li {
    float: left;
}

#nav a {
	display: block;
	color: white;
   	font-weight: bold;
   	font-family: arial, helvetica, serif;
    padding: 2px;
}

#nav a:hover {
    color: #F28108;
    padding: 2px;
}

#nav ul li a:hover {
    background: #0A77D4;
}



#nav li ul {
	position: absolute;
	background: #5EC0F8;
    visibility: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: white;
   	padding: 0px;
	margin: 0px;
	list-style: none;
}

#nav li ul li:hover {
	background: #0A77D4;
    color: #F28108;
}

#nav li ul li {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: white;
}

#nav li ul ul {
	margin: -0.5em 0 0 11em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	visibility: hidden;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    visibility: visible;
}

Share this post


Link to post
Share on other sites
Replacing
#nav li {
float: left;
}
with
#nav li {
float: left;
position: relative;
width: 100px;
}
seems to work in Firefox (where 100px is the desired width of the menu).
I haven't tested it in any other browser, and since I don't know the rest of the HTML, I can't really test it properly anyway. But it may help you somewhat. [smile]

Share this post


Link to post
Share on other sites
"#nav li" applies to all li descendants of #nav, so also to the drop down menu items. You should either use "#nav > li" (which will not work in ie), or add "#nav li li { float: none; }", which disables floating again for the menu items.

Share this post


Link to post
Share on other sites
Quote:
Original post by WanMaster
Replacing
#nav li {
float: left;
}
with
#nav li {
float: left;
position: relative;
width: 100px;
}
seems to work in Firefox (where 100px is the desired width of the menu).
I haven't tested it in any other browser, and since I don't know the rest of the HTML, I can't really test it properly anyway. But it may help you somewhat. [smile]
All the list elements have a width specified manually with style="", but the position:relative fixed a few minor alignment issues.
Quote:
Original post by twanvl
... or add "#nav li li { float: none; }", which disables floating again for the menu items.
This fixed it completely. Thanks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this