Hi,

IE6 is adding a double margin/padding to my Navbar on the LEFT side.

I have tried display:inline; but it doesn't fix it.

I have tried adding display:inline; to navigation li aswell, still no fix.

It would seem also different Widths of the Nav boxes too.

Any idea?

#navbar {
	float: left;
	margin: 10px auto 5px auto;
	min-height: 30px;
	height:auto !important;
	height: 30px; /* IE6 */
	width: 960px;
	display:inline;
}

#navigation {
   list-style: none;
   margin: 0; padding: 0;
   margin-left:15px;
}
#navigation li {
   float: left;
   margin-left: 5px; 
}
#navigation li a {
   display: block;
   width: 123px;
   text-align: center;
   padding: 3px 0;
color: #fff;
background-color: #322481;
text-decoration: none;
border: solid 2px #9d006f;
font-weight:bold;
font-size: 1.1em;
}
#navigation li a:hover {
color: #fff;
background-color: #d931a2;
text-decoration: none;
border: solid 2px #9d006f;
font-weight:bold;
font-size: 1.1em;
}

<div id="navbar">
<ul id="navigation">
<li id="active"><a href="#" id="current">Link</a></li>
<li><a href="#">Link </a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

When you float something left or right and add a margin going in the same direction as the float - as you have float:left with a left margin, IE6 will DOUBLE that margin. The fix IS to add display: inline to the floated element with the margin applied. However, you must do this using conditional comments to call a separate css file that contains ONLY the code needed to correct IE.