ul Navigation-Menu Problem IE6 / IE7

[gartenzwerg11]

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

[ChrisB]

Hi,

Habe schon nach etwaigen margins gesucht, aber das css von oben ist alles, was da ist.

Und das Default-Stylesheet des jeweiligen Browsers ist das, was dazu kommt.

Weiß jemand, wie ich dieses Problem prinzipiell umgehen kann?

Man gibt die Abstände, die man haben will, explizit an - und zwar Innen- und Aussen-.

MfG ChrisB

[gartenzwerg11]

also padding und margin...
auch wenn ich menu auf padding:0px und navigation auf margin:0px setze, verändert sich nichts...

[ChrisB]

Hi,

auch wenn ich menu auf padding:0px und navigation auf margin:0px setze, verändert sich nichts...

Eventuell enthält es ja noch andere Elemente, die Abstände haben könnten ...?

MfG ChrisB

[dedlfix]

Hi!

auch wenn ich menu auf padding:0px und navigation auf margin:0px setze, verändert sich nichts...
Eventuell enthält es ja noch andere Elemente, die Abstände haben könnten ...?

Und für solche Fälle gibt es Tools wie Firebug(FF) oder die Debugbar(IE), die anzeigen, welches Element welche Abstände mitbringt. In einigen (zum Beispiel Firebug) kann man sogar live Änderungen am CSS probieren, ohne einen neuen Roudtrip über Editor, speichern, neu laden und gegebenenfalls noch scrollen durchführen zu müssen.

Lo!

[Gunnar Bittersmann]

@@gartenzwerg11:

nuqneH

ich habe ein Navigationsmenü mit ul und li gebaut.
Dies ist in einem Div mit einem Hintergrundbild eingebettet.

Wozu das?

Das 'div'-Element ist wohl überflüssig; die Formatierungen kannst du auch dem 'ul'-Element geben.

Qapla'