Du bist hier::--Listen mit CSS in IE, Firefox und Opera gleich ausrichten.

Listen mit CSS in IE, Firefox und Opera gleich ausrichten.

Ein immer wieder auftauchendes Problem: man möchte den Abstand zwischen Listeneinträgen und dem Bildschirmrand individuell einstellen, die verschiedenen Browser interpretieren das aber unterschiedlich, der Abstand (i.d.R. ja nach links) ist nicht gleich.

Beispiel: hier online anzuschauen Abhilfe:

1. Zunächst muss man für alle Browser gleiche Ausgangsbedingungen schaffen. Definiert man in seinem Stylesheet keinen Aussenabstand für das body-Element, so macht das jeder Browser so wie er will gemäß seiner default-Einstellung.
Also im Stylesheet zunächst folgendes festlegen:

body {margin:0px;}

Selbstverständlich kann man auch einen anderen Zahlenwert festlegen, wenn dies das Seitenlayout fordert. Wichtig ist eben nur, dass überhaupt eine Festlegung für das margin des body-Tag erfolgt.

2. Die unterschiedliche Interpretation des Aussenabstandes von Listeneinträgen in den verschiedenen Browsern rührt daher, dass der Internet Explorer diesen Abstand über margin (=Aussenabstand) festlegt, während Firefox/Mozilla und Opera dieses über padding (=Innenabstand) festlegen. Will man also Einfluss auf die Darstellung nehmen, so muss man für die Liste sowohl einen Wert für padding, als auch einen Wert für margin festlegen. Für eine gleichgestaltige Darstellung müssen diese Werte natürlich übereinstimmen.

Will man nun eine Ausrichtung direkt am linken Bildschirmrand erreichen, darf man den Wert leider nicht Null wählen, da so sonst die Listenbullets hinter dem linken Rand verschwinden.

<ul style="margin-left:0; padding-left:0;">

Beispiel: hier online anzuschauen

Erst ab einem Wert~0.5em oder ~8px sind in allen Browsern die Bulletzeichen zu sehen.

<ul style="margin-left:0.5em; padding-left:0.5em;">

Beispiel: hier online anzuschauen

Gruß derpfleger

Von |2018-07-25T14:43:58+00:00Oktober 3rd, 2007|Kategorien: Webseiten/HTML|0 Kommentare

Über den Autor:

Hinterlassen Sie einen Kommentar