Kombinierte CSS Schreibweise mit Klassen und ID

Ich arbeite gerade an einer Webseite, deren Navigation aus zwei Gruppen besteht: Die erste Gruppe erhält ein blaues Hintergrundbild, die zweite Gruppe ein orangenes. Realisiert wird diese Navigation indem jedes li Element via skript eine eigene Klasse bekommt. Anstatt list-style-image habe ich dem Linkelement a padding-left gegeben und ein Hintergrundbild eingefügt.

Es gibt ein Hintergrundbild für den nicht aktiven Zustand und eines für :hover. Ist eine Seite aktiv, fällt a weg. Stattdessen gibt es li mit span inside, dem ein weiteres Hintergrundbild für den aktiven Zustand zugeschrieben wurde.

Das Ergebnis wird auch in allen Browsern angezeigt, nur im IE6 nicht.

Der Grund: der IE6 kann Kombinationen aus Klasse und ID nicht darstellen, wenn zuerst die Klasse und dann die id kommt.
li.OLMa7#OLMactiv  geht nicht.

Lösung:  immer zuerst die id schreiben, dann die Klasse:
li#OLMactive.OLMa7 (Danke an das xhtml Forum)

oder auf Kombinationen verzichten und die Eigenschaften entweder unter der id oder der Klasse zusammenfassen.

Eine anderen Workaround habe ich leider nicht (er)finden können. Wenn aber jemand eine elegantere Lösung weiß, würde ich einen Hinweis sehr gerne entgegennehmen.
Ich freue mich auf den Tag, an dem der IE6 schlichtweg nicht mehr unterstützt wird.

3 Gedanken zu „Kombinierte CSS Schreibweise mit Klassen und ID“

  1. Ich verstehe das Problem nicht so ganz.

    Ich hätte nun ganz grob gesagt:

    li.OLMa7 span#OLMactiv

    oder stehe ich grad aufm Schlauch?

    LG Marcel

    PS: Ich vevorzuge CSS-Sprites für Hintergrundbilder die beim Hover wechseln. ;-)

  2. Nein, nicht Schlauch. Mit span# kenne ich das von anderen Installationen auch und wurde deswegen mit dem Problem bisher gar nicht konfrontiert. Es war nur in dem output des skriptes, welches ich für den Prototyp verwendet habe, nicht drin und da bin ich erst überhaupt drauf gekommen, dass die kombinierte Schreibweise wegen dem IE6 auch gar nicht geht.

Kommentare sind geschlossen.