list-style-image:url: Abstand zwischen Bild und Text

[Jürgen Berkemeier]

Hallo,

mit

<ul style="padding:0px;margin:0px;padding-top:40px;margin-left:30px">
 <li style="list-style-image:url(Bild.gif);padding:0px;margin:1px">Text</li>
</ul>

erzeuge ich eine Liste mit eigenem Bild. Leider ist der Abstand zwischen Bild und Text in jedem Browser anders und in keinem so, wie ich es möchte. Kann man diesen Abstand einstellen? Mit "marker-offset" wie in http://forum.de.selfhtml.org/archiv/2002/4/9697/#m53696 habe ich es probiert, es hatte aber weder im IE6 noch im Mozilla einen Einfluss. Eine Testseite befindet sich z.Zt. unter http://www.uni-muenster.de/Physik/Test/index_V2.html. Die "1. Version" benutzt übrigens Tabellen, die ich ersetzen möchte.

Gruß,     Jürgen

[Thomas Luethi]

Hallo,

Listen-Formatierung mit CSS ist "nicht ganz ohne".
Die Browser haben ihre eigenen Vorstellungen...

http://www.subotnik.net/style/list-box-test.html
http://devedge.netscape.com/viewsource/2002/list-indent/

Versuch, mit margin, border und padding von UL und LI rumzuspielen.

Gruesse,

Thomas

[Jürgen Berkemeier]

Hallo Thomas,

hab ich gemacht. Leider ist das Ergebnis browserabhängig. Besonders Opera 7 liegt völlig daneben.

Gruß,     Jürgen

[Thomas Luethi]

Hallo,

hab ich gemacht. Leider ist das Ergebnis browserabhängig. Besonders Opera 7 liegt völlig daneben.

So what?

Schau Dir mal die Marktanteile an.
Je nach Statistik 80 - 90 % MS IE.
Dann noch etwas Netscape 6/7 und Mozilla/Geckos.
Dann noch ein paar aussterbende Netscape 4.x
Und irgendwann - unter "ferner liefen" - noch ein paar Operas.

Identisches Aussehen wirst Du sowieso nie hinkriegen.

Sorge dafuer, dass der Code (HTML und CSS) valide ist,
dass es in MS IE 5 - 6 und Mozilla _gut_ aussieht,
und dass es in den uebrigen Browsern _lesbar_ ist.

Alles andere ist IMHO Zeitverschwendung.

Gruesse,

Thomas

[tom]

wenn ich dich richtig cerstanden hab dann

<div style="....

oder ähnliche lösung. Erläuter mal näher...
Gruß tom

[Jürgen Berkemeier]

Hallo Tom

nein, auf DIVs möchte ich verzichten. Bild im DIV und Text im DIV daneben ginge natürlich, aber dann kann ich auch bei Tabellen bleiben. Ich möchte bei Listen den Abstand zwischen dem Bild und dem Text beeinflussen, nach Möglichkeit in "allen" Browsern gleich.
Gruß,     Jürgen

[wahsaga]

hi,

Leider ist der Abstand zwischen Bild und Text in jedem Browser anders und in keinem so, wie ich es möchte.

wie Thomas schon sagte, das ist nicht ganz trivial, zumindest in der praxis, da die browser hier alle eigene interpretation haben.

also workaround bietet es sich an, list-style-image ganz abzuschalten, und stattdessen mit margin, padding und hintergrundbildern als ersatz für das listenzeichen zu arbeiten.

gruss,
wahsaga

[Jürgen Berkemeier]

Hallo wahsaga,

das habe ich schon in http://forum.de.selfhtml.org/archiv/2003/11/62428/#m352964 versucht. Eine andere Lösung wäre, mit

<div style="text-indent:-21px;padding-left:15px;padding-top:5px"><img src="Bild.gif" alt="" border=0 hspace=6>Punkt 1<br>Punkt 1b</div>

eine Liste nachzubilden. Aber da bin ich auch nicht mehr so weit vom Tabellenlayout entfernt.

Gruß,     Jürgen