Listen in allen Browsern gleich Darstellen?

[Christoph]

Hi,

ich hab nen kleines Problemchen,
und zwar habe ich meine Listen mit CSS formatiert:

ul {
 list-style-image: url("img/bullet.gif");
 list-style-position: inside;
 margin: 0px;
}

Im Inet Explorer stellt mir diese Einstellung Die Bullet Grafik direkt an die Schrift ohne Leerzeichen also bin ich gezwungen jeweils ein nbsp: vor zustellen, im Mozilla sind die Listenabstände komplett anders müsste dort also schon mit margin: -20; eingreifen um den Abstand anzupassen, der Opera lässt die Zeilen ebenfalls anders einrücken und dort sieht alles völlig durcheinander aus.. ;-(

Ist echt zum verzweifeln...

Hat da jemand vieleicht nen Tipp oder nen guten Link wo ich sehe wie man dieses Problem bewältigt?

Ich danke euch für eure Hilfe...

Gruss
Christoph

[Robin Popp]

Hallo,

ich simuliere eine Liste immer, anstatt tatsächlich eine zu verwenden. Das Inkompatibiltätsproblem in Sachen Liste wirst du kaum beheben können.
Ich mache immer ganz normalen Text mit eigens gesetzten  o.ä., bestimme per CSS Schriftgrad und Zeilenabstand, und das halten die Browser dann normalerweise auch korrekt ein. Einrücken kannst Du ja mit   erledigen oder wie auch immer

Grüsse, Robin

[molily]

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