Menüpositionierung im IE und Firefox. Problem

[UnoDosTres]

Hallo,

ich habe eine auf einer Liste bassiertes Menü.
Aber ich bekomme es nicht hin es gescheit zu positionieren. Wenn es im IE gut auschaut dann ist es im Firefox viel zuweit nach links. Wenn es im Firefox gut aushaut ist es im
IE(7) etwas zu weit rechts.
Wie bekomme ich das hin?

Hier das CSS:

#sidebar {
	width: 138px;
	margin-left: -2em; /*hiermit habe ich rumexperimentiert*/	
	margin-bottom: 3px;
	margin-top: 3px;
}

.menu {
	list-style-type: none;
	color: #d64a20;
	width: 120px;
	
}
.menu li a:link,a:visited {

padding: 3px;
width: 120px;
display:block;
border-bottom: 0px;

border-right: 0px;
border-top: 0px;
}

.menu li a:hover {

padding: 3px;
text-decoration:none;
background-color: #ffd660;
color: #d64a20;

}

 

[Admi]

Ggf musst du mittels der conditional comments eine Browserweiche bauen. Sozusagen 2 CSS-Dateien. Eine für den korrumpierten IE und eine für standardkonforme Browser.

 

[Maik]

Hi,

wenn du die voreingestellten Polsterungseigenschaften des Listenelements auf null setzt, sollte ein Stylesheet für alle Browsermodelle ausreichen:

#sidebar {
width: 138px;
/*margin-left: -2em;*/ /* auskommentiert = deaktiviert */
margin-bottom: 3px;
margin-top: 3px;
}

.menu {
list-style-type: none;
margin:0;
padding:0;
color: #d64a20;
width: 126px; /* 120px + 2*3px = 126px */
}

.menu li a:link, .menu li a:visited {
padding: 3px;
width: 120px;
display:block;
border-bottom: 0px;
border-right: 0px;
border-top: 0px;
}

.menu li a:hover {
padding: 3px;
text-decoration:none;
background-color: #ffd660;
color: #d64a20;
}

 

[UnoDosTres]

Alles klar, hat geklappt. Danke.
Aber wo genau lag jetzt der Fehler?
Verstehe noch nicht so ganz.

 

[Maik]

Die Browser besitzen "vom Werk aus" eine unterschiedliche Voreinstellung für die Polsterungseigenschaften des Listenelements. Daher müssen diese mittels margin:0 und padding:0 zurückgesetzt werden, damit die Ausrichtung der Listenpunkte in allen Browsern übereinstimmt.