Tuesday, October 09, 2007
« Connection with the server was reset wit... | Main | Leaving Firefox »
Firefox margin-top CSS bug
If you have floated boxes followed by a cleared box, firefox will not honor margin-top on that box.

Here is a page demostrating the firefox bug (pops)

I think Firefox is assuming that the extended margins of float left and right apply to cleared boxes, while the specs do not say or imply that. Here is the relevent section from the spec for the clear property:

left
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
right
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
both
The generated box is moved below all floating boxes of earlier elements in the source document..
none
No constraint on the box's position with respect to floats.

Here is a baseline html/css sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Firefox css bug</title>
</head>
<body>
    <div id="container">
        <div style="background-color: Orange; width: 100px; height: 35px; float: left">
        </div>
        <div style="background-color: green; width: 100px; height: 35px; float: left">
        </div>
        <div style="background-color: black; width: 100px; height: 35px; clear: both; margin-top: 30px;">
        </div>
    </div>
</body>
</html>
css | firefox bugs
Posted By: Chris Burkhardt on October 9, 2007  #    Disclaimer  |  Comments [0]  |  Related posts:
Leaving Firefox
Comments are closed.