If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

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

VERIFIED INVALID

Status

()

Firefox
General
--
minor
VERIFIED INVALID
9 years ago
8 years ago

People

(Reporter: Jimmy Axenhus, Unassigned)

Tracking

3.0 Branch
x86_64
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

9 years ago
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.
(Reporter)

Updated

9 years ago
Version: unspecified → 3.0 Branch

Comment 1

9 years ago
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
Last Resolved: 9 years ago
Resolution: --- → INVALID

Comment 2

9 years ago
Created attachment 368439 [details]
test case with added background-color

Updated

9 years ago
Status: RESOLVED → VERIFIED
Version: 3.0 Branch → unspecified

Updated

9 years ago
Version: unspecified → 3.0 Branch

Comment 3

8 years ago
Created attachment 392471 [details]
faux columns, showing second column's first p's border collapse

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?

Comment 4

8 years ago
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.