[CSS] Elemente lassen sich in IE6 nur einmal überschreiben?

[Phoenix]

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>

[Phistev]

Wenn du das HTML selber erstellst: vermeide es. Wenn du das PHP o.ä. machen lässt: 'ne if-else-Abfrage sollte ausreichen

Code:

if (site == current)
{
  echo(" id="current");
} else {
  echo(" class="navschema1");
}

[Phoenix]

Erm.. ich möchte vorschlagen, die Frage durchzulesen und zu verstehen bevor man eine Antwort postet.

Es geht darum, immer verschiedene Navschemas zu haben (die Klassen müssen also immer da bleiben). Eines dieser Navschemas ist das aktuelle (id="current") und muss je nach Klasse (navschemaX) mit 'seinen' Grafiken angezeigt werden.

Da kann man nichts vermeiden oder entweder- oder ausgeben. Weil dann würden mindestens ein Zustand identisch zu einem anderen sein, und das ist nicht das Ziel. Wichtig ist ja gerade, die Kombination aus beidem korrekt auszuwerten, was ja auch Firefox und Opera korrekt machen.

[alcaeus]

Moin,

ich habs jetzt nicht getestet, aber versuchs mal mit

Code:

.navschema1 #current

anstatt

Code:

#current.navschema1

Greetz
alcaeus

[Phoenix]

:love: Alcaeus, Du bist ein Schatz! Es läuft :) :love: