Navigation überspringen

Unerklärliche Lücken zwischen Elementen, oder: »Der Almost Standards Mode«

Problem:
Manchmal steht man vor der Aufgabe, Graphiken bündig untereinander anzuordnen, z. B. die graphischen Buttons eines vertikalen Navigationsmenüs. Außerdem beinhalten viele so genannte »Tabellenlayouts«, die auf modernen Seiten allerdings keine Verwendung mehr finden sollten, die bündige Anordnung von graphischen Elementen in Tabellenzellen. Obwohl die Werte sämtlicher margin- und padding-Eigenschaften auf 0 gesetzt werden, können unter bestimmten Umständen vertikale Abstände zwischen den Bildern auftreten.
Unterschiede durch DOCTYPE-Switch in:
Mozilla, Opera, Safari, Konqueror
Ursache:

Der Initialwert der CSS-Eigenschaft vertical-align zur vertikalen Ausrichtung von Inline-Elementen ist baseline. Dadurch liegen Inline-Elemente wie Text oder Bilder innerhalb der »Line-Box« auf der so genannten Basislinie, auch Schriftlinie genannt. Zwischen der Schriftlinie und der unteren Kante der Line-Box wird Platz für die Unterlängen von Buchstaben wie g, j, oder y reserviert. Werden Graphiken untereinander angeordnet, so befindet sich eine Lücke in der Größe einer Unterlänge zwischen den Graphiken, egal ob Text, der Platz für diese Unterlänge benötigt, vorhanden ist oder nicht.

Abbildung: Darstellung von Basislinie und Unterlängen innerhalb einer Line-Box
Besonderes Verhalten im Internet Explorer:

Während in den meisten modernen Browsern dieses Verhalten durch DOCTYPE-Switching beeinflusst werden kann, verhält sich der Internet Explorer sehr uneinheitlich. Befindet sich eine Graphik innerhalb eines Listenelementes, so liegt diese generell auf der Basislinie. Innerhalb anderer HTML-Elemente hängt es von der Schreibweise des HTML-Codes ab, ob Lücken entstehen oder nicht. Wenn zwischen dem Image-Tag und den öffnenden und schließenden Tags des umschließenden Elementes Zeilenumbrüche eingefügt werden, so liegt die Graphik auf der Basislinie. Ohne diese Zeilenumbrüche werden keine Lücken entstehen. Dieses Verhalten des Internet Explorers tritt völlig unabhängig vom gewählten Darstellungsmodus auf.

  • Lücken im Internet Explorer: 
    <div>
  <img src="foo.png" alt="" />
</div>
  • Keine Lücken im Internet Explorer: 
    <div><img src="foo.png" alt="" /></div>
Lösungen und Beispiele:

Die meisten aktuellen Browser unterscheiden zwischen dem Full Standards Mode und dem Almost Standards Mode. Der einzige Unterschied zwischen diesen beiden Darstellungsmodi besteht darin, dass im Standards Mode Bilder generell auf der Basislinie positioniert werden, wie es die CSS-Spezifikation verlangt, im Almost Standards Mode dagegen Bilder nicht mehr auf der Basislinie positioniert werden, sofern kein zusätzlicher Text eine Basisline erzwingt. Dieses Verhalten entspricht dem Verhalten im Quirks Mode. Ansonsten ist das Verhalten von Full und Almost Standards Mode absolut identisch.

Mit der Wahl des Almost Standards Mode steht eine schnelle Methode zur Verfügung, um das Lücken-Problem zu umgehen, ohne dass weitere Abstriche bei der standardkonformen Code-Interpretation gemacht werden müssten. Trotzdem sollte beachtet werden, dass letztendlich nur eine Fehlerkorrektur der Browser ausgenutzt wird. Da das Verhalten im Almost Standards Mode nicht dem Standard entspricht, ist somit nicht gewährleistet, dass in jedem Browser durch die Wahl eines geeigneten Darstellungsmodus die Lücken beseitigt werden können.

Es gibt mehrere Möglichkeiten, um die Lücken unabhängig vom verwendeten Darstellungsmodus zu beseitigen. Welche Methode am besten geeignet ist, muss jeweils am speziellen Fall entschieden werden. Die einfachste Möglichkeit, die Lücken im Internet Explorer zu beseitigen, ist der Verzicht auf die problematischen Zeilenumbrüche im Quelltext. Da dies nicht immer wünschenswert ist, weil unter Umständen der Quelltext unübersichtlich wird, können die folgenden Methoden auch im Internet Explorer zur Problembehebung eingesetzt werden.

Ausrichtung der Graphiken über vertical-align:bottom
Die Graphiken werden über vertical-align:bottom am unteren Rand der Line-Box ausgerichtet. Wenn so formatierte Graphiken untereinander angeordnet werden, entstehen keine Lücken. Wenn die Graphiken allerdings zu klein sind, versagt diese Methode, da durch die CSS-Eigenschaft line-height eine Mindesthöhe der Line-Box vorgegeben wird.
Formatierung der Graphiken als Block-Element

Wenn die Graphiken jeweils einzeln in einem Element liegen, so können die Graphiken mit display:block als Block-Element formatiert werden. Dadurch erzeugt das Bild keine Line-Box mit dazugehöriger Basislinie mehr. Gleichzeitig passt sich die Höhe des umschließendes Elementes an die Höhe der Graphik an. Wenn so formatierte Graphiken untereinander angeordnet werden, treten keine Lücken auf.

Diese Methode ist nicht geeignet, wenn Graphiken gleichzeitig auch innerhalb eines Elementes nebeneinander angeordnet werden sollen, da sonst durch die Block-Formatierung automatisch ein Zeilenumbruch erzeugt wird.

Formatierung über die line-height des umschließenden Blockes

Die CSS-Eigenschaft line-height beschreibt die minimale Höhe einer Line-Box. Durch sie wird auch der minimale Abstand zwischen Basislinie und oberem bzw. unterem Rand der Line-Box bestimmt. Wird der Wert von line-height des Container-Elementes einer Graphik verkleinert, so wird die Basislinie weiter zum unteren Rand der Line-Box verschoben. Wird der Wert klein genug gewählt, so fallen Basislinie und der untere Rand zusammen. Zwischen untereinander angeordneten Graphiken treten keine Lücken mehr auf.

Diese Variante zur Vermeidung der Lücken zeigt im Internet Explorer keine Wirkung. Wenn die Reduzierung des Wertes von line-height die einzig mögliche Methode zur Problemlösung ist, so müssen im Quelltext die für den Internet Explorer problematischen Zeilenumbrüche vermieden werden.

Die folgenden Beispielseiten enthalten Situationen, in denen »unerklärliche« Lücken zwischen vertikal angeordneten Bildern auftreten können. Zunächst wird anhand eines Beispiels ohne besondere Formatierungen das Problem dargestellt, anschließend werden die Methoden zur Lösung des Problems vorgestellt.

Um zu zeigen, dass die vorgestellten Lösungsansätze auch im Internet Explorer angewendet werden können, wurde der Code durch Zeilenumbrüche im Quelltext mit Absicht so erstellt, dass die Lücken auch im Internet Explorer auftreten.

Nur zu Demonstrationszwecken wird das Problem auch anhand von so genannten »Tabellenlayouts« geschildert, da das Problem hier besonders häufig in Erscheinung tritt. Auf modernen Seiten sollten diese allerdings keine Verwendung mehr finden. Die hier vorgestellten Lösungen können aber natürlich problemlos auf jedes andere HTML-Element übertragen werden.

Die Beispielseiten für den Quirks Mode und den Almost Standards Mode dienen hauptsächlich zur Demonstration des Browserverhaltens in den weniger strengen Darstellungsmodi. Am deutlichsten sichtbar wird das Problem im Full Standards Mode.

Literatur:

Letzte Änderung des Inhaltes: 17.09.06