Browserübergreifende Einrückungen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die einzelnen Browser benutzen unterschiedliche Methoden für die Listeneinrückung. Mit Hilfe linker Außenabstände soll eine einheitliche Darstellung in allen (CSS-fähigen) Browsern erreicht werden.

Lösung

Legen Sie für das ul-Element Werte für die Eigenschaften margin-left und padding-left fest:

ul {
 margin-left: 40px;
 padding-left: 0px;
}

Diskussion

Die Browser setzen verschiedene Methoden ein, um die Einrückung einer Liste zu erreichen. So wird in Mozilla und Netscape 6+ die Einrückung über die Eigenschaft padding (Innenabstand) gesteuert. In Internet Explorer und Opera wird hierfür stattdessen margin (Außenabstand) verwendet.

Damit die Darstellung in allen Browsern einheitlich vorgenommen wird, müssen Sie die Werte für beide Eigenschaften explizit festlegen. Dabei sollte die Einrückung selbst nur mit einer der beiden Eigenschaften definiert werden. Wenn Sie die Einrückung auf beide Eigenschaften aufteilen, wird die Darstellung in verschiedenen Browsern inkonsistent.

Versehen Sie beide Eigenschaften für eine Liste, die direkt vom body-Element abstammt, mit dem Wert null, kann es passieren, dass der Browser die Aufzählungszeichen außerhalb des sichtbaren Bereichs darstellt. Um sicherzustellen, dass der Benutzer die Marker auch sieht, sollten Sie entweder den linken Innenabstand oder den linken Außenabstand für ul-Elemente auf eine Breite von mindestens 1em festlegen.

Siehe auch

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln