Vertikale <LI>-Abstände im MS IE7 und FF

Hier noch ein Nachtrag zu den letzten Beiträgen in dieser Kategorie:

Den vertikalen Abstand zwischen den LI-Elementen in vertikal orientierten Listen steuert man zumeist mit einer Vorgabe von “margin-top” und/oder “margin-bottom” für das LI-Element. Vergleicht man solche vertikal aufgebaute Listen anschließend bzgl. ihrer Darstellung im MS IE 7 und im Firefox, so fällt einem leider oftmals auf, dass der Internet Explorer um einige Pixel größere Abstände zwischen Listenelementen zeichnet als der FF.

Im Internet findet man hierzu vielfach den Tip mit

< li style =”clear:left; float:left; margin-bottom: …. ” >

zu arbeiten. Wir meinen, dass dies
1) einen künstlichen Missbrauch der float-Anweisung darstellt,
2) unerwünschte Nebenwirkungen haben kann (s. hierzu einen früheren Beitrag in dieser Kategorie)
3) keinesfalls immer hilft, das Problem zu lösen.

Wir empfehlen Ihnen dagegen, zunächst folgende Tipps auszuprobieren, um vertikale Abstände in Listen im FF und MS IE aneinander anzugleichen.

Tipp 1: Besondere Behandlung von Bildern in <LI>-Tags

Man prüfe, ob sich innerhalb der LI-Elemente <IMG>-Tags befinden. In diesem Fall dichtet der MS IE7 grundsätzlich mindestens 1 Pixel zum per CSS vorgegebenen Abstand zwischen den LI-Elementen hinzu. I.d.R. hilft es auch nichts, das <IMG>-Tag in einem <DIV>-Tag zu kapseln. Sehr wohl hilft dagegen aber eine Darstellung des <IMG>-Tags als “Block”-Element, z.B über eine CSS-Vorgabe für die IMGs der betroffenen Liste:

ul#mein_ul li img { display:block; }

Es war für uns ein regelrechtes Schlüsselerlebnis, nach diesem kleinen Trick feststellen zu dürfen, dass plötzlich die vertikalen Abstände zwischen LI-Elementen im MS IE7 und FF gleich wurden.

Tipp 2: Vorgbe von position:relative; vertical-align:top für das <LI>-Tag

Sind unabhängig von Bildern weiterhin unerklärliche Differenzen in den Abständen zwischen FF und MS IE festzustellen, so hilft sehr oft ein Hinzufügen folgender CSS-Vorgaben für das LI-Element:

li { position:relative; vertical-align:top; ….. }

In folgendem Beispiel mussten wir eine Liste mit Bildern unterschiedlicher Höhe formatieren und haben die Tipps 1 und 2 wie folgt kombiniert, um im MS IE und im FF auf gleiche Abstände zwischen den LI-Elementen zu kommen:

ul#img_list { position:relative; width:10.0em; list-style-type:none; margin-left:0.0em; margin-top:0.4em; padding:0.0em; }
ul#img_list li { position:relative; vertical-align:top; margin-top:0.0em; margin-bottom:2.0em; padding:0.0em;line-height:1.6em; min-height:8.0em; }
ul#img_list li img { display:block; }

Tipp 3: Korrekter Abschluss von float-Direktiven im <LI>-Tag

In einem der letzten Beiträge hatte ich diskutiert, dass man innerhalb eines <LI>-Tags durchaus Positionierungen mit float-Direktiven vornehmen kann. Typisch wäre etwa ein Konstruktion der Art

<li>
   <div style=”float:left; …. ” >DIV-Inhalt A</div>
   <div style=”float:left; margin-left:1.0em; … ” >DIV-Inhalt B</div>
   <div style=”float:right; … ” >DIV-Inhalt C</div>
</li>

oder noch Komplexeres. Das Manko am obigen Code ist natürlich, dass die Float-Befehle wieder aufgehoben werden müssen, damit beide Browser das umgebende und die nachfolgenden <LI>-Elemente korrekt und vor allem mit korrekter Höhe aufbauen. Zum “clear” der “float”-Anweisungen kann man folgende <P>-Tag-Anweisung verwenden:

<li>
   <div style=”float:left; …. ” >DIV-Inhalt A</div>
   <div style=”float:left; margin-left:1.0em; … ” >DIV-Inhalt B</div>
   <div style=”float:right; … ” >DIV-Inhalt C</div>
   <p style=”clear:both; font-size:0px; line-height:0px; margin-top:20px; height:0px;”>&nbsp;</p>
</li>

Hierbei schließt das <P>-Tag nicht nur die “float”-Direktiven ab. Das Tag sebst soll in unserem Beispiel keine Höhe aufweisen, aber einen Abstand unterhalb der DIVs erzeugen (”margin-top” !) und damit auch die Höhe des umgebenden <LI>-Tags beeinflussen. Wir diskutieren diesen sehr allgemeinen Fall; natürlich steht es jedem frei, die margins anders zu setzen.

Essentiell ist hierbei im MS IE7 das “height:0px”. Ohne diese Anweisung wird leider unabhängig von den sonstigen Anweisungen der Schriftzug im MS IE7 mindestens 1px einnehmen.

Für den FF ist ferner die explizite Angabe von &nbsp; essentiell - im besonderen dann, wenn dass <P>-Tag auch noch die Rolle eines vertikalen Abstandshalters mit einem “margin-top:20px;” spielen soll. Die “margin-top”-Anweisung würde bei einem

<p …..> </p>

im FF schlicht ignoriert werden, während der MS IE 7 auch in diesem Fall die “margin-top”-Anweisung beachten würde !

Tipp 3: Bei verschachtelten Listen nach der inneren Liste ein <p>-Tag einfügen

Bei verschachtelten Listen der Art

<ul>
   <li>
      <ul>
      <li>
…..
…..
      </li>
   </ul>
<ul>

behandelt der MS IE 7 z.B. die Kombination von “margin-bottom”-Anweisungen für das letzte innere <LI> mit “margin-bottom”-Anweisungen für das äußere <LI> anders als der FF. Um den Firefox dazu zu zwingen, die LI-Elemente nicht zusammenzuschieben, kann es nützlich sein, im Anschluß an das innere </ul> ein künstliches <P>-Tag mit 0 Ausdehnung einzuführen (ähnlich wie in Tipp 3).

<ul>
   <li>
      <ul>
      <li>
…..
…..
      </li>
   </ul>
   <p style=”font-size:0px; line-height:0px; margin-top:20px; height:0px;”>&nbsp;</p>
<ul>

Tipp 4: Kapseln von Formularelementen in DIVs passender Höhe innerhalb von LI-Elementen mit ausreichender Höhe

Hat man die Abstände zwischen den LI-Elementen standardisiert, so kann es bei Listen mit Formularelementen auch innerhalb eines LI-Elementes zu Höhenunterschieden zwischen dem FF und dem MS IE kommen. Gerade der MS IE dichtet zu Formular-Elementen wie dem INPUT- und dem TEXTAREA-Feld gerne eigene Außenabstände hinzu, die im Ergebnis zu größeren Höhen des LI-Elementes im MS IE 7 im Gegensatz zum Firefox führen können.

Bei Formularelementen innerhalb von Listenelementen lohnt es sich deshalb, die Höhe des LI-Elementes so vorzugeben, dass das Formularelement inkl. einiger Pixel Außenabstand sicher in das LI-Element hineinpasst und das Textarea-Feld oder Input-Element zusätzlich in ein DIV einzubinden. Bei mit PHP dynamisch erzeugten Textarea oder Input-Feldern ist es also notwendig, die Höhe der LI-Elemente beim Generieren der Liste bereits passend zu berechnen und dem LI-Element danach eine hinreichende Höhe per “height”-Anweisung in einem “style”-Attribut mitzugeben.

Ausgangsbasis ist dabei aber immer eine “height”-Vorgabe für die Formularfelder selbst!

Bei Textarea-Elementen sollte man bei der Höhenformatierung eher mit einer CSS-height-Vorgabe anstelle des “row”-Attributs arbeiten, um Höhenwerte im MS IE 7 zu bekommen, die mit denen des FF identisch sind.

Mit Hilfe der Tipps 1 bis 3 haben wir es praktisch immer geschafft, vertikal orientierte Listen so hinzubekommen, dass sie im MS IE und FF bzgl. des (vertikalen) Zwischenraums zwischen den Listenelementen und auch bzgl. der Höhe der Listenelemente identisch aussahen.

Dieser Eintrag wurde am 7.10.2008 um 22:53 verfasst und befindet sich in LAMP / Webentwicklung. Sie können alle Antworten zu diesem Eintrag über den Feed RSS 2.0 mitverfolgen. Hinterlassen Sie eine Antwort oder einen Trackback-Link zu Ihrer eigenen Homepage.