Listen-bullet

[Körnerbrötchen]

Hallo Community,
beim herumexperimentieren einer neuen Homepage und der Nutzung der Listenformatierung unter Verwendung einer eigenen Listengrafik (list-style-image) ist folgendes Problem aufgetreten:
1. Firefox setzt die Grafik mit Abstand unten bündig zum Text.
2. Internet Explorer 7 setzt die Grafk ohne Abstand mittig zum Text
3. Opera setzt die Grafik oben bündig zum Text (mit Abstand)

Firefox interpretiert mir das ganze am Schönsten (wohl eher Zufall), aber irgendwie sind die Entwickler der Browser mal so gar nicht nach den W3-Richtlinien vorgegangen (oder gibt es dazu gar keine ;) ).
Zumindest ist das natürlich nicht das was ich haben will. Ich will Abstand zum Text und die Grafik nach unten bündig. Damit ihr euch besser vorstellen könnt was ich meine nen Screenshot und den Code.

index.htm

<ul>
 <li><a href="#" accesskey="H"><b>H</b>ome</a></li>
 <li><a href="#" accesskey="N"><b>N</b>ews</a></li>
 <li><a href="#" accesskey="G"><b>G</b>ästebuch</a></li>
</ul>

style.css

ul {
 margin:0;
 padding:10px;
 list-style-type:none;
 list-style-image:url(img/square.gif);
 list-style-position:inside;
 font-variant:small-caps;
}

 

[gruenspan]

ich stand auch mal vor diesem Problem. Ich meine, ich hätte es mit einem:

LI{
line-height:wert;
}

gelöst. Probieren, bin nicht mehr sicher.

 

[Körnerbrötchen]

Nein, nein... leider nicht!

Mhmm? Sonst keine Ahnung, irgendwer?
Denn sonst löse ich das Problem mit "padding" und "background-image".
Nur - dass ist ja eigentlich nicht der Sinn der Sache! ;)

 

[threadi]

Hab das Problem meist so gelöst, dass ich 2 Grafiken einbinde: eine für Firefox und andere moderne Browser, eine zweite für den IE. Die Ergänzung für den IE hab ich per Conditional Comment in die HTML-Seite eingebunden.

 

[Sn0opy]

Mach doch eine Grafik, die so hoch ist, die die Zeile, nur dass du eben mit Transparenz bzw. der Farbe des Hintergrund rund um dein Lila-Bullet arbeitest.

 

[Körnerbrötchen]

jo nur dann hab ich das Prob, dass der IE die Grafik immer noch dranpappt.
Aber vielleicht dann wirklich mit CC. Mhmm... das wäre natürlich auch noch ne Möglichkeit. Probiere das später mal aus.

 

[gruenspan]

ok, ich weiß es wieder:

Hatte nen Link im <li>. Diesem hab ich ein Padding-left gegeben und eine eine Hintergrundgrafik verpasst. Diese dann entsprechend positioniert...feddisch.

(line-height nicht vergessen)