Navigation bar is off in IE

[Foppa]

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