molily: Listen in allen Browsern gleich Darstellen?

Beitrag lesen

Hallo, Robin,

ich simuliere eine Liste immer, anstatt tatsächlich eine zu verwenden. Das Inkompatibiltätsproblem in Sachen Liste wirst du kaum beheben können.

Das stimmt leider. Mir ist keine Möglichkeit bekannt, wie explizit ein Abstand zwischen Listeneintragszeichen und dem Text angegeben werden kann. margin, padding und text-indent für ul/ol und li betreffen diese Größe nicht.
CSS3 wird Abhilfe leisten, so wie ich die Selectors CR beziehungsweise den Lists WD verstehe (Stichwort ::marker). Naja, es ginge auch mit CSS2 und marker-offset, wie ich das sehe, aber auch dies versteht kein Browser (in Verbindung mit :before, display:marker und content). (Die Browserhersteller werden in Zukunft viel zu tun haben, wenn ich an XHTML2, CSS3, XFrames, XForms und SVG denke.)

Trotzdem würde ich in jedem Fall eine richtige Liste verwenden.

Ich mache immer ganz normalen Text mit eigens gesetzten [Grafiken? --molily] o.ä., bestimme per CSS Schriftgrad und Zeilenabstand, und das halten die Browser dann normalerweise auch korrekt ein.

Das halte ich für eine schlechte Übergangslösung. Ich würde trotz den Problemen vorschlagen, eine Liste zu verwenden, welche list-style-type:none verwendet. Innerhalb jedes li-Elements muss man leider eine Grafik einbinden, welche natürlich alt="" hat. Der Abstand zwischen Grafik und nachfolgendem Text lässt sich mit li img {padding-right:...;} festlegen (optimal wäre li img:first-child, kennen aber auch nur richtige Browser).

Eine andere, ebenso unorthodoxe Lösung wäre das gewohnte Nutzen von list-style-image und das zusätzliche Einfügen eines zusätzlichen Inline-Elements in jedes li-Element:

<li><span>Text</span></li>

Mittels Styles und Selektoren, welche nur bestimmte Browser verstehen, lässt sich dann ein Abstand einfügen:

li span {padding-left:1em;} /* Style für MSIE und Opera */
:root span {padding-left:0;} /* Style für Gecko-Browser */

Leider ist das nicht zuverlässig, weil keine zwingende Verbindung zwischen der Beobachtung, dass ein Browser standardmäßig keinen Abstand zwischen Listeneintragsbild und dem li-Text macht und der Beobachtung, dass auch gerade die Browser den :root-Selektor nicht verstehen... Auch werden hierbei nur MSIE, geckoide Browser und Opera berücksichtigt.

Einrücken kannst Du ja mit   erledigen oder wie auch immer

Das ist die allerschlechteste Möglichkeit, das ist ganz und gar nicht im Sinne von semantischem Markup. Vor allem lässt es sich nicht zentral verwalten und der Text ist nur zur Präsentation im Dokument.

Grüße,
Mathias

--
Mein Leben, ein Leben ist es kaum, / Ich gehe dahin als wie im Traum.
Wie Schatten huschen die Mensch hin, / Ein Schatten dazwischen ich selber bin.
Und im Herzen tiefe Müdigkeit - / Alles sagt mir: Es ist Zeit ...
(Theodor Fontane, Mein Leben)