gartenzwerg11: ul Navigation-Menu Problem IE6 / IE7

Beitrag lesen

Hallo,
ich habe ein Navigationsmenü mit ul und li gebaut.
Dies ist in einem Div mit einem Hintergrundbild eingebettet.
Aufbau wie folgt:

<div id="menu">
 <ul class="navigation">
  <li class="active"><a href"#">Startseite</a></li>
  <li class="inactive">...</li>
 </ul>
</div>

  
#menu{  
	height:36px;  
	width:1000px;  
}  
.navigation{  
	list-style: none; /*um die bullets der list zu vermeiden*/  
	width:auto;  
	margin-left:0px;  
}  
.navigation li {  
display:inline;  
}  
.navigation a{	  
	display:block;  
	text-decoration: none;  
	font-size:13px;  
	background-image:url(../images/inactiv.png);  
	background-repeat:no-repeat;  
	height:27px;  
	width:132px;  
	float:left;  
	margin-left:-1px;  
	margin-top:2px;  
	line-height:28px;  
	padding-left: 16px;  
}  
.navigation .active a{  
	padding-left:48px;  
	height:29px;  
	width:102px;  
	color:#0066ff;  
	float:left;  
	z-index:100;  
	line-height:30px;  
	margin-top: -2px;  
}  

Problem: Bis IE7 werden die Menüpunkte an den linken Rand des Menü-Div geschoben, während im FF und IE8 genau 40px Abstand sind. Siehe hier:

http://imgur.com/GQp44.png
Oben: IE8&FF
Unten IE7 und kleiner
Habe schon nach etwaigen margins gesucht, aber das css von oben ist alles, was da ist.
Weiß jemand, wie ich dieses Problem prinzipiell umgehen kann?
Jede Hilfe willkommen :)
Vielen Dank