IE-Bug: CSS-Kurzform von liste-style

Bug

Der Internet Explorer scheint ein Problem beim Überschreiben einer CSS-Eigenschaft durch eine andere CSS-Eigenschaft zu haben, wenn für die Eigenschaften die Kurzform verwendet wird. Hier ein Beispiel:
li{list-style: square url(bullet.gif);}
#ausnahme li{list-style: none;}
Eigentlich dürfte der Browser kein Listen-Symbol anzeigen, wenn die ID der Liste ausnahme ist. Im IE scheint das none aber nur den Wert square zu überschreiben. Deshalb zeigt er trotzdem die Grafik als Listenzeichen an.

Lösung

Da das Problem seinen Ursprung in der Kurzform (mehrere Werte in einer CSS-Eigenschaft) liegt, muss man einfach alle Werte überschreiben:
li{list-style: square url(bullet.gif);}
#ausnahme li{list-style: none none;}
Möglich wäre es auch, nicht die Kurzform zu benutzen, sondern die Eigenschaften auszuschreiben:
li{
list-style-type: square;
list-style-image: url(bullet.gif);
}
#ausnahme li{
list-style-image: none;
list-style-type: none;
}

Hier gibt es ein Beispiel mit mehreren Ansätzen.

2 Kommentare zu “IE-Bug: CSS-Kurzform von liste-style”

  1. #1

    Silv

    am 19. Oct 2011 um 10:13

    Ich hatte mich in der Vergangenheit schon mehrmals darüber geärgert, dass der IE offenbar ein Problem mit Listen hat. Vielen Dank für diesen Beitrag hat wunderbar geklappt.

  2. #2

    Bernhard

    am 14. Nov 2011 um 16:30

    Danke für den Hinweis.
    Genau das Problem hatte ich gerade.

    Als Programmierer verliert man leider viel zu schnell aus den Augen, dass der IE nicht alles mitmacht. Und dann fängt das herumfrickeln und Fehler suchen an.

Kommentieren: