Es ist ja optisch ganz nett, wenn die Listenpunkte einer ungeordneten Liste vom Browser automatisch mit einem Listenzeichen versehen werden. Dadurch wird die Liste optisch noch einmal hervorgehoben.

Dumm ist nur wenn die Listenzeichen in jedem Browser anders aussehen. Ganz übel wird es dann, wenn sie im Internet Explorer zu sehen sind im Firefox aber nicht, oder umgekehrt.

Was tun sprach Zeus?

Ihr könntet list-style-position auf inside setzen (beim Firefox ist es per Default-Einstellung outside), aber die Punkte sind im Internet Explorer trotzdem klein, dünn und kraftlos.

Es gibt einen besseren Weg:

Erst mal schalten wir die Listenzeichen mit list-style-type:none; alle aus.

Dann erstellen wir mit einem Grafikprogramm ein eigenes Listenzeichen und binden das als Hintergrundgrafik ein.

Bitte CSS ergänzen:

Der Stand im Browser:

Die erstellte Grafik:

Die Grafik hat die Maße 14x14px und ist ein gelber Punkt. Nicht spektakulär, aber für unsere Zwecke mehr als ausreichend.

Nun binden wir die Grafik als HG-Grafik ein. Dazu bilden wir eine Klasse die wir li zuweisen.

Aussehen des Quellcodes:

Bitte CSS ergänzen:

Stand im Browser:

Naja, da ist zwar was gelbes, aber an der falschen Stelle.

Bitte CSS ergänzen:

Stand im Browser:

Man kann jetzt darüber streiten, ob die HG-Grafik im Internet Explorer 0.1em zu tief sitzt und das dann per Conditional Comment korrigieren, aber das müßt ihr selbst entscheiden.

Auf jeden Fall erhaltet ihr so Listenzeichen, die browserübergreifend gleich aussehen und auch leicht zu positionieren sind.

Außerdem ist der Text wenn der Listenpunkt mehr als einzeilig ist sauber eingerückt, was bei den autom. Listenzeichen oder list-style-image nicht der Fall ist.