Andi: Firefox Overflow (Float) Bug?

SELF-Forum

Firefox Overflow (Float) Bug?

Andi
– Informationen zu den Bewertungsregeln

Hi,

ich habe hier ein seltsames Problem. Ganz nebenbei das erste Mal, dass ich ein Problem nur mit dem Firefox habe. Versucht doch mal diesen Beispiel-Code:

<html>
<head>
<style type="text/css">
.bild {
   height:100px;
   width:100px;
   float:left;
   background:#000;
}

.content {
  height:100px;
  width:100px;
  overflow:hidden;
  margin:0px;
  padding:0px;
  margin-left:120px;
}
</style>
</head>
<body>
<img src="clear.gif" width="100" height="100" class="bild" border="0" alt="" />
<div class="content">
          <p>Test-Text</p>
</div>
</body>
</html>

Normalerweise sollte die Grafik nach links floaten. Da folgende Block-Elemente nicht neben das float-Element gesetzt werden, sondern nur ihr Inhalt danach ausgerichtet wird, sollte das "margin-left" im Div "Content" eigentlich dafür sorgen, dass das Div insgesamt 20 Pixel neben der floatenden Grafik sitzt. Das funktioniert auch so in Netscape 7, IE 5.0 und 6.0 und Opera 7.5. Nur der Firefox rechnet die 120 Pixel vom rechten Rand der Grafik und setzt das "Content"-Div zudem etwas zu tief an. Sobald ich "overflow:hidden;" rausnehme, stellt auch der Firefox die Seite so dar, wie es sein sollte.

Kann mir jemand helfen ob das ein Bug ist oder ob es da eine besondere Einschränkung für overflow:hidden; gibt?

Gruß
Andi

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Firefox Overflow (Float) Bug?

    Andi
    – Informationen zu den Bewertungsregeln

    Ich denke ich habe die Lösung gefunden, auch wenn mir der Ansatz nicht 100%ig gefällt. Das W3C sagt in der CSS 2.1 Definition:
    -------
    9.4.1 Block formatting contexts

    Floats, absolutely positioned elements, inline-blocks, table-cells, and elements with 'overflow' other than 'visible' establish new block formatting contexts.

    In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.
    -------

    Das heißt also, dass der Firefox mal wieder der einzige ist, der es eigentlich richtig macht. Damit also eine Entschuldigung an das gute Stück. Um das ganze praktisch doch einsetzen zu können, habe ich also einfach einen weiteren Div-Container um den Inhalt gezogen und das "overflow"-Attribut auf den inneren Container gelegt. Nicht schön, aber es funktioniert in allen gängigen Browsern.

    Gruß
    Andi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln