In Listen Grafiken als Aufzählungszeichen zu verwenden ist eigentlich kein Problem. Mit der CSS-Eigenschaft list-style-image lassen sich beliebige Grafiken als Bullets einsetzen, was auch von allen wichtigen Browsern unterstützt wird. Wenn man seine Liste mit dieser Anweisung eine eigene Aufzählungsgrafik verpassen möchte, wird das funktionieren, ohne wenn und aber. Allerdings ist dies unter Umständen nicht gut genug. Dieser Artikel soll zeigen, warum man seine Aufzählungszeichen nicht immer mit list-style-image umsetzen sollte.

Eine Alternative

Wenn wir einmal so tun, als gäbe es list-style-image nicht, wäre es nicht schwer, eine andere auf CSS basierende Lösung zu finden. Man müsste der fraglichen Liste einfach die Standard-Aufzälungszeichen stehlen, das gewünschte Bild als nicht-wiederholende Hintergrundgrafik der <li>-Elemente einsetzen und den Content der <li> einfach per Padding etwas einrücken.

Eine solche Konstruktion könnte in etwa wie folgt aussehen:

ul {
    list-style:none;
}
ul li {
    background:url('bullet.gif') no-repeat left center;
    padding-left:16px;
}

So weit, so logisch. Dass sich das Endergebnis dieses Stylesheets weitgehend mit dem deckt, was auch list-style-image ausgeben würde, ist klar. Viel komplizierter ist diese Methode auch nicht. Aber warum sollte man sie dem altbewährten list-style-image vorziehen?

Das Problem mit list-style-image

Alle Browser unterstützen list-style-image. Aber so etwas bedeutet, wie jeder leidgeprüfte CSSler weiß, noch lange keine einheitliche Darstellung. Bei Aufzählungszeichen fällt das besonders deutlich auf, denn hier kocht wirklich jeder Browser sein eigenes Süppchen und verschiebt die Bullets je nach Lust und Version.

Dieses Problem kennt die Methode mit der Hintergrundgrafik nicht! Dort sitzt die Grafik bei jedem Browser an der gleichen Stelle, was je nach Programm schon einen recht drastischen Unterschied ausmachen kann.

Aufzählungszeichen in verschiedenen Browsern
Oben: list-style-image
Unten: Hintergrundbild

Obrige Grafik ist aus dieser Demoseite entstanden, wo beide Methoden in den verschiedenen Browsern verglichen werden können.

Ein weiterer Vorteil: PNG für alte Internet Explorer

Der Internet Explorer 6 unterstützt transparente PNGs nur, wenn man etwas nachhilft. Allerdings funktioniert dieses Nachhelfen nicht bei Aufzählungszeichen, sondern nur bei <img>-Elementen und eben Hintergrundbildern. Ein weiteres Argument für die alternativen Aufzählungszeichen, allerdings sollte nicht vergessen werden, allerdings sollte nicht vergessen werden, dass IE-taugliche PNG-Hintergründe diversen Einschränkungen unterliegen.

Fazit

Die CSS-Eigenschaft list-style-image wird von allen Browsern unterstützt, aber nicht einheitlich dargestellt. Das muss keinesfalls ein Problem sein, nur wenn man seine Aufzählungszeichen exakt platzieren möchte, ist die Hintergrund-Methode die Lösung. Auch wenn transparente PNGs als Bullets zum Einstz kommen sollen (und auch noch im IE6 gut aussehen sollen), kommt man an dieser Methode nicht vorbei.