IE <ul> float bug

[whaleo]

Hi all

First post here! :D

I have this <ul> based navigation using CSS sprites and sliding-doors together. It floated to the right and renders fine in firefox but IE6 & 7 breaks it by steping the <li>s up to the right. I own a mac so I use browsershots.org too render in IE. See screenshot:
[attachment=0]screen-capture-6.jpg[/attachment]

and here is the CSS:

Code:

#nav {
width:100%;
border-bottom:solid 0px #333333;
position:absolute;
right:0px;
bottom:0px;
list-style:none;
margin:0px 0px 0px 0px;
padding-right:18px;
}

#nav li a {
padding:0px;
float:right;
margin:0px 5px -6px 0px;
background:url(images/nav-right-sprite.png) no-repeat right top;
}

#nav li a:hover {
margin:0px 5px -6px 0px;
background:url(images/nav-right-sprite.png) no-repeat right -60px;
}

#nav a span {
color:#aaaa55;
display:block;
background:url(images/nav-left-sprite.png) no-repeat left top;
padding:5px 10px 5px 10px;
}

#nav a span:hover {
color:#222;
background:url(images/nav-left-sprite.png) no-repeat left -60px;
}

body.home #nav li#home a,
body.services #nav li#services a,
body.customers #nav li#customers a,
body.about #nav li#about a,
body.contact #nav li#contact a {
background:url(images/nav-active-right.png) no-repeat right top;
}

body.home #nav li#home a span,
body.services #nav li#services a span,
body.customers #nav li#customers a span,
body.about #nav li#about a span,
body.contact #nav li#contact a span {
color:#444;
background:url(images/nav-active-left.png) no-repeat left top;
}

Any clues?

Thanks, Whaleo

[cssgirl]

Could be cuz you are floating the <a>s and not the lis. Try setting the lis to float:left;. Do you have a link?

[whaleo]

@cssgirl – I had to make the <li>’s {display:inline}

I was a little stoopid!

It was here all along1 : http://css-tricks.com/prevent-menu-stepdown/

:D

[Author]

Posts