Forums

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:


#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

treehouse : what would you like to learn today?

Forums

IE float bug