hier ist ein Beispiel mit einer Standard-Bullet-Grafik und einem Bild als Bullet-Grafik, sowie jeweils ein paar Screenshots:

Url auf Wunsch wieder entfernt.

(URL bitte spätestens nach drei Tagen entfernen! Vielen Dank!)

Bei den verschiedenen Browsern kann ich beim besten Willen keine Indifferenz erkennen. Wie gesagt: Schön wär’s. Gerade weil die Darstellungen so unterschiedlich sind, ist die von dir empfohlene Methode mit Hintergrundbildern ja nötig bzw. besser.

Hm, schön wär’s. Meiner Erfahrung nach werden sie sehr wohl unterschiedlich behandelt.

Dann täuscht dich deine Erfahrung vielleicht etwas.

Folge dem Link zur Spezifikation in meinem ersten Kommentar.
Dort steht etwas weiter unten ganz eindeutig zu list-style-image:

Diese Eigenschaft legt das Bild fest, das als Listenelementmarkierung verwendet wird. Wenn das Bild zur Verfügung steht, ersetzt es die Markierung, die mit der Markierung ‘list-style-type’ festgelegt wurde.

Ok ist CSS 2.0.
In 2.1 steht da:

This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the ‘list-style-type’ marker.

Das automatische Listenzeichen wird nur durch das image ersetzt.

Ganz egal was deine Erfahrungen sind, in der Spezifikation steht wie die Browser sich bei sowas zu verhalten haben.

Ach ja ein weiterer Vorteil der Methode mit background-image ist, das der Listenpunkt ruhig mehrere Zeilen haben kann.
Durch das padding werden auch weitere Zeilen richtig eingerückt.

Leider wird sie von den unterschiedlichen Browsern genau wie das automatisch erzeugte Listenzeichen indifferent behandelt.

Hm, schön wär’s. Meiner Erfahrung nach werden sie sehr wohl unterschiedlich behandelt.

die Eigenschaft kenne ich.
Leider wird sie von den unterschiedlichen Browsern genau wie das automatisch erzeugte Listenzeichen indifferent behandelt.

Browserübergreifend korrekt geht das sicher nur mit background-image.

Wirf doch mal einen kurzen Blick in die Spezifikation.

Scroll ein bißchen tiefer zu list-style-image. Unter dem grünen Kasten steht:

Diese Eigenschaft legt das Bild fest, das als Listenelementmarkierung verwendet wird. Wenn das Bild zur Verfügung steht, ersetzt es die Markierung, die mit der Markierung ‘list-style-type’ festgelegt wurde.

Das heißt also das Bild ersetzt das automatisch erzeugte Listenzeichen.
Damit ist klar das es auch die Nachteile des automatisch erzeugten Listenzeichens erbt.

Seit CSS1 gibt es die Eigenschaft list-style-image die es ermöglicht eine eigene Bullet-Grafik für Listenpunkte anzugeben.

Das ganze wäre dann so zu Realisieren:

li { list-style-image:url(list_style_image.gif); }


Der Vorteil an der Eigenschaft ist, das man sich nicht um die Positionierung der Bullet-Grafik kümmern muss, so wie in deinem Beispiel.

Auch nochmal auf SELFHTML Nachzulesen unter: CSS Listenformatierung: list-style-image (eigene Bullet-Grafik).

Gruss Fabian