Jaja, Matze hat es ja vorhergesagt.. ich stolpere gerade über eine Eigenart des IE (6 und auch 7).
Der Code unten soll eine Navigation ähnlich der von Lycos realisieren: Ich habe Tabreiter von denen 1, 5 und 6 grau sind, 2 ist grün, 3 ist blau und 4 ist rot (klappt soweit in allen Browsern).
Auf der jeweiligen Seite auf der ich mich befinde (diese ist im
html-code durch id="current" markiert) soll anstelle der farbig ausgefüllten Reiter nur der Rahmen in der jeweiligen Farbe angezeigt werden. Da das ja alles kleine Grafiken sind arbeite ich hier mit einem austauschbaren Hintergrund.
Nun mein Problem: In Firefox und Mozilla tut das auch, die aktuelle Seite wird korrekt dargestellt. Im IE funktioniert das allerdings nur bei den Elementen im navschema1 (also den grauen). Die anderen drei Farben tauschen die linke Seite der Grafik (deklariert in #current.navschemaX) nicht aus.
Interessant ist jedoch: Tausche ich den grauen gegen einen beliebigen anderen Block im CSS aus funktioniert diese Farbe, und die graue nicht mehr.
Der IE scheint also irgendwie Probleme damit zu haben, Klassen mit einer ID zu überschreiben.
Kennt jemand dazu einen Hack?
Unten der Code, und das aktuelle Beispiel kann man sich
hier live angucken - da sieht man den Unterschied sehr schön.
CSS-Code
Code:
/* hier oben sind die margin- und padding-deklarationen.. nix wildes */
/* normale Graue Navigation */
div.navschema1 { background:
url(../images/DarkGray/bg.gif) #dae0d2 repeat-x 50% bottom; }
li.navschema1 { background:
url(../images/DarkGray/left.gif) no-repeat left top; }
a.navschema1 { background:
url(../images/DarkGray/right.gif) no-repeat right top; color: #2C2556; }
a:hover.navschema1 { background:
url(../images/DarkGray/right.gif) no-repeat right top; color: #333; }
#current.navschema1 { background-image:
url(../images/DarkGray/left_on.gif); }
#current a.navschema1 { background-image:
url(../images/DarkGray/right_on.gif); color: #333; }
/* GRÜN */
div.navschema2 { background:
url(../images/OliveDrab/bg.gif) #dae0d2 repeat-x 50% bottom; }
li.navschema2 { background:
url(../images/OliveDrab/left.gif) no-repeat left top; }
a.navschema2 { background:
url(../images/OliveDrab/right.gif) no-repeat right top; color: #2C2556; }
a:hover.navschema2 { background:
url(../images/OliveDrab/right.gif) no-repeat right top; color: #333; }
#current.navschema2 { background-image:
url(../images/DarkGray/left_on.gif); }
#current a.navschema2 { background-image:
url(../images/OliveDrab/right_on.gif); color: #333; }
Der
HTML-Code:
Code:
<div id="nav"><a id="navigation" name="navigation"></a>
<div id="nav_main" class="navschema2">
<ul class="navschema2">
<li class="navschema1">[
url="index1.php"]Seite 1[/
url]
<li id="current" class="navschema2">[
url="index2.php"]Seite 2[/
url]
<li class="navschema3">[
url="index3.php"]Seite 3[/
url]
<li class="navschema4">[
url="index4.php"]Seite 4[/
url]
<li class="navschema1">[
url="index5.php"]Seite 5[/
url]
<li class="navschema1">[
url="index6.php"]Seite 6[/
url][/list] </div>
</div>