Menupunkte nebeneinander machen Faxen beim IE6

[Rohri]

Hallo,

ich habe ein "Two-Level-Menu" von hier: http://css.maxdesign.com.au/listamatic2/horizontal05.htm
an meine Bedürfnisse angepasst.

  
#navlist  
{  
position: relative;  
width: 100%;  
height: 30px;  
margin: 0;  
padding: 0;  
white-space: nowrap;  
}  
  
#navlist li  
{  
float: left;  
margin: 3px;  
padding: 4px;  
width: 109px;  
list-style-type: none;  
display: block;  
}  
  
#navlist li#active  
{  
float: left;  
margin: 3px;  
padding-left: 0px;  
width: 109px;  
background: transparent url(tab.gif) left top no-repeat;  
list-style-type: none;  
display: block;  
color: #FFF;  
}  
  
#navlist li#active a  
{  
font-weight: bold;  
color: #FFF;  
}  
  
#navlist li#active a:hover { color: #fff; }  
  
  
#navlist li#tab2  
{  
float: left;  
margin: 3px;  
padding-left: 0px;  
width: 109px;  
background: transparent url(tab2.gif) left top no-repeat;  
list-style-type: none;  
display: block;  
color: #525252;  
}  
  
#navlist li#tab2 a  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: none;  
}  
  
#navlist li#tab2 a:hover  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: underline;  
}  
  
#navlist li#tab2#active a  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: none;  
}  
  
  
  
#navlist li#tab3  
{  
float: left;  
margin: 3px;  
padding-left: 0px;  
width: 109px;  
background: transparent url(tab2.gif) left top no-repeat;  
list-style-type: none;  
display: block;  
color: #525252;  
}  
  
#navlist li#tab3 a  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: none;  
}  
  
#navlist li#tab3 a:hover  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: underline;  
}  
  
#navlist li#tab3#active a  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: none;  
}  
  
  
  
  
  
#navlist li a  
{  
position: relative;  
display: block;  
color: #FFF;  
text-align: center;  
text-decoration: none;  
}  
  
#navlist li a:hover  
{  
color: #00c;  
text-decoration: underline;  
}  
  
  
#navlist ul#subnavlist  
{  
position: absolute;  
width: 100%;  
left: 0;  
top: 24px;  
height: 23px;  
margin: 0;  
padding: 0;  
white-space: nowrap;  
background-color: #06C;  
}  
  
#navlist ul#subnavlist li  
{  
width: auto;  
margin: 0;  
padding-right: 10px;  
border: 0;  
}  
  
#navlist ul#subnavlist li a  
{  
width: auto;  
padding: 2px;  
border: 0;  
color: #FFF;  
}  
  
#navlist ul#subnavlist li a:hover  
{  
color: #00c;  
text-decoration: underline;  
/* IE5/Mac disappearing item fix */  
}  
  
#navlist ul#subnavlist li#subactive a  
{  
float: left;  
margin: 3px;  
padding-left: 0px;  
width: 109px;  
background: transparent url(tab.gif) left top no-repeat;  
list-style-type: none;  
display: block;  
}  
  
  
  
* html > body #navlist, * html > body #navlist ul#subnavlist  
{  
width: 600px;  
/* IE5/Mac fixed width fix */  
}  

  
<div id="navcontainer">  
<ul id="navlist">  
<li id="active"><a href="#" id="current">ITEM1</a>  
<ul id="subnavlist">  
<li><a href="#">sub1</a></li>  
<li><a href="#">sub2</a></li>  
<li><a href="#">sub3</a></li>  
<li><a href="#">sub4</a></li>  
<li><a href="#">sub5</a></li>  
</ul>  
</li>  
<li id="tab2"><a href="#">ITEM2</a></li>  
<li id="tab3"><a href="#">ITEM3</a></li>  
</ul>  
</div>  

Der Validator gibt keine Fehlermeldung aus und im IE 7 sowie den aktuellen Firefox und Opera erfolgt die Darstellung wie gewünscht. Im IE6 erscheinen allerdings die "Submenupunkte" nicht nebeneinander, sondern untereinander.

Ich habe versucht das Problem zu beheben und verschiedene "Tipps" ausprobiert, z.B. den, dass man li a mit float:left beglücken soll. Das hat aber nicht funktionert. Vielleicht gibt es ja soetwas wie den "3-Pixel-Bug" und einer von Euch kennt die Lösung auf den ersten Blick. Ansonsten wäre ich natürlich auch für jede andere Hilfe sehr dankbar!

Gruß, Rohro

[ChrisB]

Hi,

Im IE6 erscheinen allerdings die "Submenupunkte" nicht nebeneinander, sondern untereinander.

Das dürfte am display:block für die A-Elemente liegen.

Entweder dem IE <= 6 dieses vorenthalten, oder generell durch floating und width ersetzen.

Btw: float und display:block bei den LI ist überflüssig (sofern das nicht zur Behebung eines Darstellungsfehlers dienen soll), den floating impliziert block.

Um verschlanke das ganze mal ein bisschen - derzeit machst du viele Angaben unnötigerweise mehrfach (z.B. die Wiederholung vieler Werte, die du für die LI allgemein vorgegeben hast, nochmal für diverse element#id-Selektoren).

MfG ChrisB

[Rohri]

Das dürfte am display:block für die A-Elemente liegen.

Entweder dem IE <= 6 dieses vorenthalten, oder generell durch floating und width ersetzen.

Wenn ich das richtig verstande habe: Ich habe jetzt für den IE6 folgendes gemacht:

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

und dort bei allen a das display:block entfernt. Das Problem besteht aber dennoch

Danke!

[ChrisB]

Hi,

Ich habe jetzt für den IE6 folgendes gemacht:

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

>   
> und dort bei allen a das display:block entfernt. Das Problem besteht aber dennoch  
  
Die Links haben ja auch weiterhin display:block, wenn das ursprüngliche Stylesheet für den IE 6 immer noch eingebunden ist.  
  
MfG ChrisB  
  

-- 
Light travels faster than sound - that's why most people appear bright until you hear them speak.

[Rohri]

Die Links haben ja auch weiterhin display:block, wenn das ursprüngliche Stylesheet für den IE 6 immer noch eingebunden ist.

Ich habe dort alles, was mit dem Menu zusammenhängt, herausgenommen.

[ChrisB]

Hi,

Die Links haben ja auch weiterhin display:block, wenn das ursprüngliche Stylesheet für den IE 6 immer noch eingebunden ist.

Ich habe dort alles, was mit dem Menu zusammenhängt, herausgenommen.

Wo - aus dem ursprünglichen Stylesheet?

Online-Beispiel?

MfG ChrisB

[Rohri]

Wo - aus dem ursprünglichen Stylesheet?

Ja, sorry, wenn das mißverständlich war.

Online-Beispiel?

HIER

[ChrisB]

Hi,

Online-Beispiel?

HIER

Da zeigt mir der IETester im 6er-Modus jeweils zwei der List-Items nebeneinander an.
(In wie weit das vom gewünschten abweicht, kann ich schlecht beurteilen, weil alle anderen Browser die Liste jetzt gänzlich unformatiert darstellen.)

Wenn ich für #subnavlist eine Breite von bspw. 500px vergebe, dann zeigt der 6er auch alle Links nebeneinander an.
Du scheinst die Liste absolut positioniert, und ihr gar keine Breite gegeben zu haben. Da hat der IE von der Breitenberechnung nach shrink-to-fit vielleicht eine andere Vorstellung.

MfG ChrisB

[Rohri]

Wenn ich für #subnavlist eine Breite von bspw. 500px vergebe, dann zeigt der 6er auch alle Links nebeneinander an.

Daran lag's (wohl). Vielen lieben Dank!!!

[Gunnar Bittersmann]

@@Rohri:

nuqneH

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

Äußerst ungünstig. Patches für IE besser an Ort und Stelle:

* html a {display: inline}

Qapla'