IE7 Floated List problem?

HTML & CSS
1

Hello,
My navigation is set up in a list. I’ve floated the whole container div and each li within so they should sit next to each other in a straight horizontal row.

But of course there’s a problem in IE7. Instead of being in a straight row the navigation looks like a set of steps, each item is slightly lower than the previous.

Any body know how to fix this? I’ve tried changing the margin-left that separates each link but doesn’t work.
Thanks

#nav {
	width: 490px;
	float: left;
	padding-left: 70px;
	padding-top: 20px;
	height:100px;

}

#nav li {
	list-style: none;
	
}

#nav a:link, #nav a:visited {
	text-decoration: none;
	color: #405866; /* blue */
	font-size: 90%;
	display: block;
	float: left;
	height: 65px;
	margin-left:45px;
}
2

You have not floated the li elements instead you have floated the a elements and hence the problem. Float li and you should be all set.

3

As mentioned above the lists are not floated and as they surrounds the float IE7 and under knock the next one down a line.

Either float the list item or set it to display:inline and forget about it.:slight_smile:

4

Thanks very much, I’ve made this fixed and works a charm. I should have realised that once you float one thing you pretty much have to float everything.