Closed Bug 484268 Opened 15 years ago Closed 15 years ago

Incorrect rendering of floating div box. The float is one line down than it should be.

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Version:
3.0 Branch
Platform:
x86_64
Linux
Type:
defect
Priority:
Not set
Severity:
minor

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: jimmy.axenhus, Unassigned)

Details

Attachments

(2 files)

test case with added background-color
708 bytes, text/html
Details
faux columns, showing second column's first p's border collapse
962 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; sv-SE; rv:1.9.0.7) Gecko/2009030423 Ubuntu/8.10 (intrepid) Firefox/3.0.7
Build Identifier: Mozilla/5.0 (X11; U; Linux x86_64; sv-SE; rv:1.9.0.7) Gecko/2009030423 Ubuntu/8.10 (intrepid) Firefox/3.0.7

When using css float it doesn't corrently render the page.
The result is that the float'ed div is one line down which it shouldn't be.

The workaround is easy. The example used here is the css border, there might be many more.

Reproducible: Always

Steps to Reproduce:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>My Beta Document</title>
		<style type="text/css">
			.left {
				float:left;
			}
		</style>
	</head>
	<body>
		<div class="left">
			<h1>Hello</h1>
			<p>Here you can read about something.</p>
		</div>
		<div>
			<h1>Hello</h1>
			<p>Here you can read about something.</p>
		</div>
	</body>
</html>
Actual Results:  
The float'ed div was actually one line down than it should be.

Image: http://img18.imageshack.us/img18/5158/firefox307.png

Expected Results:  
Both of the textblocks should be in the same height and not any height difference.
Border used to bypass the bug, just ignore it.

Image http://img10.imageshack.us/img10/4972/firefox3082.png

The bug can be avoided by adding the following in the css:

div {
border: black solid 1px;
}

I am sure that there are many more ways of bypassing this bug.
Version: unspecified → 3.0 Branch
This is invalid.
The issue you see is one of margin-collapse through the top of the in-flow div.
Adding background-colors to both div(s) makes that more visible.

In the floated block, the top-margin of the h1 does not and cannot collapse through. A floated block establishes a block formatting context.
The top-margin of the h1 in the testcase does collapse through the top of in-flow div, that is the correct behaviour per CSS2.1:8.3.1.
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

And yes, adding top border, or padding, on the div prevents the margin to collapse through. As does setting the top-margin of the h1 to 0.
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago
Resolution: --- → INVALID
Status: RESOLVED → VERIFIED
Version: 3.0 Branch → unspecified
Version: unspecified → 3.0 Branch
Philippe, is it supposed to happen when no containing box has a border?

I've created a simplified case of what I got, it's attached.
I tried remiving all borders.

Using a simple case of "faux columns", the margin of the first p inside the second child div/column collapses.
If I put a border on the containing div, or give the second contained div float left as well, the first child p regains margin to the containing div.


Would you please comment?
A floating element establishes a block formatting context (per CSS2.1:9.4.1); the margin-top of the child p will not collapse-through.
When you put a border around the .parent div, it also prevents the margin-collapse through for the margin-top of the child p.

PS - Bugzilla is not a support forum; there are many other places to ask such questions. The CSS-Discuss mailing list is such a place.
http://www.css-discuss.org/mailman/listinfo/css-d
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: