✔ IE-Problem mit horizontaler <ul>-Navi

[Kaeschdin]

Hallo zusammen,

nachdem ich nun Dutzende Codes für horizontale Navigationen mithilfe von Listen ausprobiert habe und mir diese im IE 6 und 7 immer falsch angezeigt werden, bin ich nun auf eure Hilfe angewiesen. Im FF und IE 8 ist alles schick. Das Problem: Richtigerweise zieht sich die Navi über die gesamte Breite der Seite bzw. des Inhalts-DIVs. Im IE 6 und 7 sind die Navipunkte zusammengeschoben und nehmen vielleicht nur die Hälfte der gewünschten Breite ein.

HTML-Code:

<div class="navi">
<ul>
<li><a href="#">1. Punkt</a></li>
<li><a href="#">2. Punkt</a></li>
<li class="selected"><a href="#">3. Punkt</a></li>
<li><a href="#">4. Punkt</a></li>
<li><a href="#">5. Punkt</a></li>
</ul>
</div>

CSS:

.navi{
margin-left:90px;
margin-top:20px;
width: 100%;
overflow: hidden;
height:30px;
}

.navi ul{
margin: 0;
padding: 0;
padding-left: 10px; 
font: 12px Verdana;
list-style-type: none;
}

.navi li{
display: inline;
margin: 0;
}

.navi li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 13px;
border-right: 1px solid white; 
color: white;
background: #3E3D3D; 
}

.navi li a:visited{
color: white;
}

.navi li a:hover, .navi li.selected a{
background: #E58123;
}

 

[Maik]

Hi,

ich kann mit deinem gezeigten Code soweit keinen Unterschied im IE6 u. IE7 gegenüber den anderen Browsern erkennen.

Gibt es denn zur Gegenkontrolle die vollständige Seite auch irgendwo live zu begutachten?

mfg Maik

 

[Maik]

Hallo Maik,

du hattest gerade nach einer Seite gefragt, die mein CSS-Problem im IE6 und 7 zeigt (horizontale <ul>-Navi). Da ich die Seite so ungern veröffentlichen möchte, hier ein Link:

http://***.de/***/

Danke,

Kerstin

Wenn ich die Breite der Menüpunkte nachmesse, werden mir 60px ausgegeben.

Und dieses Maß deckt sich mit der Breitenangabe dieses Deklarationblockes im Stylesheet demo.css, das nach style.css geladen wird:

li{
	/* Every thumbnail is a li element */
	width:60px; /* wird vom IE6 u. IE7 auf die <li>-Elemente in der Navigation angewendet */
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

Folglich solltest du diesen Selektor spezifizieren, damit er nur für den vorgesehenen Seitenbereich gilt, und nicht fälschlicherweise auf alle <li>-Elemente im HTML-Dokumentbaum angewendet wird.

mfg Maik

 

[Kaeschdin]

Wenn ich die Breite der Menüpunkte nachmesse, werden mir 60px ausgegeben.

Und dieses Maß deckt sich mit der Breitenangabe dieses Deklarationblockes im Stylesheet demo.css, das nach style.css geladen wird:

li{
	/* Every thumbnail is a li element */
	width:60px; /* wird vom IE6 u. IE7 auf die <li>-Elemente in der Navigation angewendet */
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

Folglich solltest du diesen Selektor spezifizieren, damit er nur für den vorgesehenen Seitenbereich gilt, und nicht fälschlicherweise auf alle <li>-Elemente im HTML-Dokumentbaum angewendet wird.

mfg Maik

Ohje, da stand ich wohl auf den Schlauch. Daran habe ich ja noch gar nicht gedacht, dass sich in der anderen css auch ein <li>-Selektor befindet. Hab's spezifiziert, indem ich da überall ein #menu davor gesetzt habe - und schon funktioniert es.

//edit1: Aber nun funktioniert die jQuery-Bildergalerie im IE nicht mehr :-(

//edit2: Ich habe die Breite von 60px aus der demo.css rausgenommen und direkt den <li>-Selektoren in der html-Datei per style-Attribut zugewiesen. Funktioniert!