Problem mit padding:0px; im IE

[-André-]

Hallo,
ich habe eine Navigationsliste, in allen üblichen Browsern wird sie richtig dargestellt, nur im Internet Explorer 6 nicht.

Ausschnitt aus der CSS Datei:

#navigation2 ul li {
	padding:0px;
	margin: 10px 5px 0 5px;
	color:#666666;
	position: static;
}

ich habe schon herausgefunden, dass es an dem Befehl

	padding:0px;

liegt. Wenn ich den Wert auf z.B. 1px; ändere, funktioniert es, aber ich ich möchte eben keinen Innenabstand haben.

Kann mir jemand sagen, woran das liegt bzw. wie ich das ändern kann?

Gruß

-André-

 

[Sven Mintel]

Moin André,

ich glaube, du musst einen grösseren CSS-Abschnitt bereitstellen, damit man das Problem nachstellen kann.

 

[Maik]

Hi,

ich muß mich da Sven anschliessen, denn mit deinem gezeigten Codeschnippsel kann ich das vermeintliche padding:0px-Problem im IE6 überhaupt nicht reproduzieren, wie es in deinem Anhang illustriert ist, und folglich derzeit dazu auch keinen Lösungsvorschlag unterbreiten.

Also poste bitte den vollständigen CSS-Code für das Menü mit dem dazugehörigen HTML-Quelltext.

mfg Maik

 

[-André-]

Ok, kann ich machen:

<div id="navigation2">
<ul id="anfahrtN">
	<li><a href="zuuns.php">Der schnellste Weg zu uns</a></li>
	<li><a href="adresse.php">Gesch&auml;ftsadresse</a></li>
	<li><a href="gaestebuch.php">G&auml;stebuch</a></li>
	<li><a href="kontakt.php">Schreiben Sie uns</a></li>
	<li><a href="impressum.php">Impressum</a></li>
</ul>
</div>

css:

#navigation2 {
	margin-left: 10px;
	width: 150px;
	position: relative;
	float: left;
	text-align: left;
	background: #fff;
	display: inline;
}
#navigation2 ul {
	width: 150px;
	position: relative;
	background: #ccc;
	padding: 5px 0 15px 0;
}
#navigation2 ul li {
	padding:0px;
	margin: 10px 5px 0 5px;
	color:#666666;
	position: static;
} 
#navigation2 ul li a{
	display: block;
	color:#666;
	padding: 5px;
	margin:0 0 0 10px;
	text-decoration: none;
	position: relative;
}
#navigation2 ul#anfahrtN li a{
	background: #81a52c;
}
#navigation2 ul#anfahrtN li a:hover{
	color: #666666;
	background: #ccc;
}
#navigation2 ul#anfahrtN li {
	background:#81a52c;
}

Gruß

-André-

 

[Maik]

Nimm mal folgende Regel für den IE6 im Stylesheet auf:

#navigation2 ul li {
	padding:0px;
	margin: 10px 5px 0 5px;
	color:#666666;
	position: static;
}
* html #navigation2 ul li { 
float:left; 
width:140px;
}

oder verwende einen Conditional Comment:

<link rel="stylesheet" type="text/css" href="...">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->

ie6.css:

#navigation2 ul li { 
float:left; 
width:140px;
}

mfg Maik

 

[-André-]

Vielen Dank für die Hilfe, mit dem * html Hack hat es funktioniert.

Aber kannst Du mir vielleicht auch erklären, wieso man diesen Hack benutzen muss?

Gruß

-André-

 

[Maik]

Der IE6 (und älter) besitzt die schlechte Angewohnheit, in solch einem Listenmenü zwischen den einzelnen Menüpunkten einen vertikalen Abstand zu setzen, der sich mit der float:left-Deklaration abstellen lässt; ggfs. ist zusätzlich eine Angabe zur Breite erforderlich, damit der Menüpunkt in der gewünschten Breite angezeigt wird, oder die Menüpunkte wegen der float:left-Deklaration nicht nebeneinander erscheinen.

mfg Maik