Liste mit 1 aktiven ID im IE6 falsch

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Hallo zusammen!

Ich habe ein Problem mit dem doofen IE6:

Mein Menu besteht aus einer Liste.
Jeder Listenpunkt beinhaltet ein background-image.
Jeweils 1 Menüpunkt kann aktiv sein, bekommt von mir also die id #active.
FF, und alle getesteten IE's (7.0, 5.5, 5.1) zeigen es richtig an.
Nur der IE6 mag den aktiven Menüpunkt nicht anzeigen. Die Sau!

Hier das relevante html:
Code: 
<div id="menu">
    <ul>
        <li class="list1" id="active"><a id="item1" href="01_home.html" title="Home">01 | Home</a></li>
        <li class="list2"><a id="item2" href="02_ueberuns.html" title="&Uuml;ber uns">02 | &Uuml;ber uns</a></li>
        <li class="list3"><a id="item3" href="#" title="Verwaltung">03 | Verwaltung</a></li>
        <li class="list4"><a id="item4" href="#" title="Betreuung / Service">04 | Betreuung / Service </a></li>
        <li class="list5"><a id="item5" href="#" title="Immobilien">05 | Immobilien</a></li>
        <li class="list6"><a id="item6" href="#" title="Technik">06 | Technik</a></li>
        <li class="list7"><a id="item7" href="#" title="Seminare">07 | Seminare</a></li>
        <li class="list8"><a id="item8" href="#" title="Downloads">08 | Downloads</a></li>
        <li class="list9"><a id="item9" href="#" title="Kontakt">09 | Kontakt</a></li>
    </ul>
</div>
und das dazugehörige css:
Code: 
/*------ menu behaviour ------*/
#menu {height:170px;}
#menu ul {margin:0; padding:0; list-style-type:none; /*background-color:#00ff00;*/} /* --- IE5.01 zickt hier noch --- */
#menu li {display:block; width:90px; border:none;}

/*------ start state ------*/
#menu li.list1 {background:transparent url(images/navigation/navi_01.gif);}
#menu li.list2 {background:transparent url(images/navigation/navi_02.gif);}
#menu li.list3 {background:transparent url(images/navigation/navi_03.gif);}
#menu li.list4 {background:transparent url(images/navigation/navi_04.gif);}
#menu li.list5 {background:transparent url(images/navigation/navi_05.gif);}
#menu li.list6 {background:transparent url(images/navigation/navi_06.gif);}
#menu li.list7 {background:transparent url(images/navigation/navi_07.gif);}
#menu li.list8 {background:transparent url(images/navigation/navi_08.gif);}
#menu li.list9 {background:transparent url(images/navigation/navi_09.gif);}

/*------ active state, i.e. active menu item ------*/
#menu li.list1#active{background:transparent url(images/navigation/navi_over_01.gif);}
#menu li.list2#active{background:transparent url(images/navigation/navi_over_02.gif);}
#menu li.list3#active{background:transparent url(images/navigation/navi_over_03.gif);}
#menu li.list4#active{background:transparent url(images/navigation/navi_over_04.gif);}
#menu li.list5#active{background:transparent url(images/navigation/navi_over_05.gif);}
#menu li.list6#active{background:transparent url(images/navigation/navi_over_06.gif);}
#menu li.list7#active{background:transparent url(images/navigation/navi_over_07.gif);}
#menu li.list8#active{background:transparent url(images/navigation/navi_over_08.gif);}
#menu li.list9#active{background:transparent url(images/navigation/navi_over_09.gif);}

#menu a {display:block; width:90px; padding-top:19px; height:0; color:#000; text-decoration:none; overflow:hidden;}
* html #menu a:link, * html #menu a:visited {height:19px; he\ight:0;}

/*------ rollover states ------*/
#menu a#item1 {background:transparent url(images/navigation/navi_over_01.gif) -90px -16px no-repeat; padding-top:18px;}
* html #menu a#item4:link, * html #menu a#item4:visited {height:18px; he\ight:0;}
#menu a#item2 {background:transparent url(images/navigation/navi_over_02.gif) -90px -17px no-repeat;}
#menu a#item3 {background:transparent url(images/navigation/navi_over_03.gif) -90px -17px no-repeat;}
#menu a#item4 {background:transparent url(images/navigation/navi_over_04.gif) -90px -17px no-repeat;}
#menu a#item5 {background:transparent url(images/navigation/navi_over_05.gif) -90px -17px no-repeat;}
#menu a#item6 {background:transparent url(images/navigation/navi_over_06.gif) -90px -17px no-repeat;}
#menu a#item7 {background:transparent url(images/navigation/navi_over_07.gif) -90px -17px no-repeat;}
#menu a#item8 {background:transparent url(images/navigation/navi_over_08.gif) -90px -17px no-repeat;}
#menu a#item9 {background:transparent url(images/navigation/navi_over_09.gif) -90px -17px no-repeat;}

#menu a#item1:hover {background-position:top right; z-index:50;}
#menu a#item2:hover {background-position:top right; z-index:50;}
#menu a#item3:hover {background-position:top right; z-index:50;}
#menu a#item4:hover {background-position:top right; z-index:50;}
#menu a#item5:hover {background-position:top right; z-index:50;}
#menu a#item6:hover {background-position:top right; z-index:50;}
#menu a#item7:hover {background-position:top right; z-index:50;}
#menu a#item8:hover {background-position:top right; z-index:50;}
#menu a#item9:hover {background-position:top right; z-index:50;}

* html #menu a:hover {height:19px; he\ight:0;}
Zu sehen & klicken ist die Seite hier:
http://www.2klang.net/TEMP/01_home.html

Bitte klickt auf den Menüpunkt "02 | Über uns". Hier werdet Ihr sehen, dass FF sowie alle IEs ausser dem 6er den Menüpunkt in orange darstellen. Der IE6 hingegen stellt nicht die #active (=oranges image) dar.


Wer weiß Rat?


PS.: Doofer Treadname, ich weiss..
 
Hi,

den entscheidenden Tipp kann ich dir derzeit leider nicht geben, aber ich finde es schon verwunderlich, dass der IE6 die "aktive" Hintergrundgrafik bei der Startseite anzeigt, und bei der nachfolgenden nicht mehr. :confused:
 
Dito!
Das ist echt ziemlich strange..

Verd*&%$! Irgendwie hab ich grad kein Händchen. Ich stolpere grad immer wieder über so seltsame Geschichten, für die ich keine Erklärung finde *schnüff*
 
Hi,

ich weiss jetzt nicht ob du die ganzen ID's und Classes und so weiter brauchst.
Aber allgemein würde ich ein Menu in dieser Art und Weise aufbauen, was auch um IE6 funktioniert.

HTML: 
<div id="menu">
  <ul>
	<li class="list1"><a class="link" href="dateiname.html" title="Home">01 | Home</a></li>
	<li class="list2"><a class="linkActive" href="dateiname2.html" title="&Uuml;ber uns">02 | &Uuml;ber uns</a></li>
        <li class="list3"><a class="link" href="#" title="Verwaltung">03 | Verwaltung</a></li>
	<li class="list4"><a class="link" href="#" title="Betreuung / Service">04 | Betreuung / Service </a></li>
	<li class="list5"><a class="link" href="#" title="Immobilien">05 | Immobilien</a></li>
	<li class="list6"><a class="link" href="#" title="Technik">06 | Technik</a></li>
	<li class="list7"><a class="link" href="#" title="Seminare">07 | Seminare</a></li>
	<li class="list8"><a class="link" href="#" title="Downloads">08 | Downloads</a></li>
        <li class="list9"><a class="link" href="#" title="Kontakt">09 | Kontakt</a></li>
  </ul>
</div>
Code: 
#menu {border:1px solid red;}
#menu ul {margin:0; padding:0; list-style-type:none; } /* --- IE5.01 zickt hier noch --- */
#menu li {width:100px;}

a.link {color:blue;display:block}
a.linkActive {color:red;display:block}

Brauchst du denn die ganzen background-Anweisungen in der css-Datei wirklich?
 
Hi ssurfer,

danke für die Antwort. Aber ja, die background-images brauch ich wirklich. (sonst hätt ich mir den Stress net gegeben :)) Denn die Navigation MUSS CI-Konform in dieser Schriftart gesetzt sein, ergo Bild..

Der Witz ist ja, dass das Teil überall funktioniert, nur halt im IE6 nicht.. :rolleyes:
 
Alles klar das wusste ich nicht, das du ja in den a-Tags auch noch den Linknamen stehen hattest.
Ich würde aber trotzdem nicht dem li-Elementen die Images zuweisen, sondern den a-Tags, da diese ja den Link referenzieren.

Du kannst ja machen class="link1" und wenn active dann class="link1Active".

Versuch es doch einfach mal hiermit.

ssurfer
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück