IE7 Floated List problem?

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.

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


#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;

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.

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:

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.