Teil 7 – CSS, Probleme und Fehler

Der "Doppelrand-Bug" (Double margin bug)

Ein kurioser Bug vom Internet Explorer 5 unter Windows ist der sogenannte „Doppelrand-Bug“ – hier wird der Betrag des Randabstandes eines gefloateten Elements verdoppelt.

Dieser Bug tritt nur auf, falls der Rand des gefloateten Elements in die gleiche Richtung zeigt, in die das Element selbst gefloated wird. Alle folgenden gefloateten Elemente mit dem gleichen Randabstand, sind von diesem Bug nicht betroffen – nur das erste Element zeigt die Auswirkungen dieses Bugs. Ebenso wirkt sich der verdoppelte Randabstand symmetrisch aus, d.h. der Randabstand wird auch auf der gegenüberliegenden Seite des gefloateten Elements verdoppelt.

Die Lösung:

.floatbox
{
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}