As you can see in the picture below, my navigation bar is way off in IE. In Firefox it looks fine.

I somehow messed it up. It looked fine, but then got messed up and I can't figure out what I did.



Below is my code:

HTML

<div id="navigation">
<ul>
  
  <li id="active"><a href="index.html">Home</a></li><li><a href="xxxxx.html">All Products</a></li><li><a href="buy-xxxxxx.html">Buy Now</a></li><li><a href="xxxxxxx.html">Testimonials</a></li><li><a href="xxxxxx.html">Videos</a></li><li><a href="xxxxx-opportunity.html">Opportunity</a></li><li><a href="contact.html">Contact</a></li>
</ul></div>

CSS

#navigation {
    background: transparent url(../images/nav_background.jpg) no-repeat center top;
    float:left;
    width:960px;
    height:40px;
    margin:20px auto;
    font-family: verdana, "lucida sans", arial, sans-serif;
    font-size:1em;
    line-height: 1.2;
}
#navigation ul {
    padding-left:20px;
    padding-top:12px;     
}
*html #navigation ul {
    margin-left:-12px;
}
#navigation li {
    display:inline;
    font-size:1em;
    padding-right:8px;
    padding-left:5px;
    padding:12px 20px 13px 20px;
    height:40px;
}
*html #navigation li {
    margin-right:4px;
}
#active {
    background: transparent url(../images/activetab_background.jpg) no-repeat center top;
    color:#fff;
    text-align:center;
}
#navigation a:link  {
    color:#fff;
    text-decoration:none;    
}
#navigation a:hover  {
    color:#fff;
    text-decoration:none;    
}
#navigation a:visited  {
    color:#fff;
    text-decoration:none;    
}
#active a:link  {
    color:#fff;
    text-decoration:none;    
}
#active a:hover {
    color:#fff;
    text-decoration:none;    
}
#active a:visited {
    color:#fff;
    text-decoration:none;    
}

You are triggering IE's doubled-float margin bug with the left margin here:

*html #navigation ul {
margin-left:-12px;

That * 'hack' should not be in your main css file, it needs to be in a separate CSS file that is called via conditional comments that ONLY IE reads. The fix, however is to set it to display: inline;

Thanks for the reply.

Just so I'm clear, I need to put the following in it's own css style sheet?:

*html #navigation ul {
display:inline;
}


Or this?


*html #navigation ul {
display:inline;
margin-left:-12px;
}



Do I need an "IF" in the head for IE to find it?

or maybe you should remove
*html #navigation ul {
margin-left:-12px;

The display:inline should go on the element that is floated left or right and to which you are also adding left or right margin in the same direction as the float. So anything with float:left and margin-left:xx (and vice-versa for right), IE will double the margin, but display:inline stops it.

I don't believe I understand.

Would you mind showing me where I need to put display:inline ?

Hi,
I took a quick look. Here are a couple of suggestions:
The nav at the top right may semantically be better structured as an unordered list, displayed in inline fashion. You can find a lot of articles on how to do that at A List Apart. I think this would better serve your navigation bar, and also you would likely remove the "word-spacing" rule you've provided and instead use padding and margins. Word spacing has a slightly different intent, I believe.
Also, if your issues are IE specific, you might consider using the Firebug for IE script, which you can include in the top of your page. Then you can compare the margins and padding, etc., on different variations of your page to see what is causing things to move around.
I hope this helps....
Thanks for sharing your post....