[CSS] float: left causes firefox to mess up positioning




13 years ago
13 years ago


(Reporter: tjoppetja, Unassigned)


Windows 98

Firefox Tracking Flags

(Not tracked)




(3 attachments)



13 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Win98; nl-NL; rv:1.7.7) Gecko/20050414 Firefox/1.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Win98; nl-NL; rv:1.7.7) Gecko/20050414 Firefox/1.0.3

When four blocks are sorted in a square of two blocks on the first row and two
blocks on the second row (as on http://dopes-planet.com/~flash/bugs/div.htm,
with the "blocks" represented as <div>'s) using the float: left CSS rule for the
left boxes, firefox renders the top-left box correctly, the top-right box
beneath the top-left box instead of next to it, the bottom-left box is rendered
correctly again, and the bottom-right box seems to be rendered on top of the
bottom-left box, but its content is beneath the bottom-left box.
On Internet Explorer 5.5 and Opera 8.0 the boxes are rendered as they should be
rendered, as can be seen on the second attachment. I couldn't check if this bug
also occurs on other platforms.

Reproducible: Always

Steps to Reproduce:
1. Go to http://dopes-planet.com/~flash/bugs/div.htm with Firefox
2. Go to http://dopes-planet.com/~flash/bugs/div.htm with IE or Opera
3. Compare

Actual Results:  
The boxes were rendered incorrectly as described erlier: the left boxes were
rendered correctly, but the top-right box was on top of the bottom-left box and
the bottom-right box was rendered partly on top, partly beneath the bottom-left box.

Expected Results:  
It should have rendered the four boxes in two rows of two boxes.

Using Windows 98SE and Mozilla/5.0 (Windows; U; Win98; nl-NL; rv:1.7.7)
Gecko/20050414 Firefox/1.0.3.

Comment 1

13 years ago
Created attachment 186352 [details]
The wrongly positioned boxes in Firefox

Comment 2

13 years ago
Created attachment 186353 [details]
The boxes again, correctly positioned in IE


13 years ago
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk


13 years ago
Component: Layout → Layout: Floats
The CSS spec says that floats displace lines but do not displace blocks (at
least blocks that don't establish new block formatting contexts).  IE's
distinction between types of blocks is triggered by use of 'height' or 'width',
which is incorrect.
Last Resolved: 13 years ago
Resolution: --- → INVALID

Comment 5

13 years ago
We could argue about that, and maybe you're right. But even then Firefox
shouldn't render the individual blocks on top of each other.
You need to log in before you can comment on or make changes to this bug.