Unexpected extra space when margins, floats, and generated content combined in a particular way

RESOLVED DUPLICATE of bug 451791

Status

()

Core
Layout: Floats
RESOLVED DUPLICATE of bug 451791
8 years ago
8 years ago

People

(Reporter: Brandon Frohs, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2b6pre) Gecko/20100103 Ubuntu/9.10 (karmic) Namoroka/3.6b6pre GTB6
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2b6pre) Gecko/20100103 Ubuntu/9.10 (karmic) Namoroka/3.6b6pre GTB6

A top-margin on an element below a floated element (in a wrapper) causes the top-margin to 'appear' twice... once between the elements and once above the first element. See provided link for test case.

Reproducible: Always

Steps to Reproduce:
1.Create webpage with a float inside a wrapper
2.Add an element below the wrapper with a top-margin
Actual Results:  
Margin appears twice.

Expected Results:  
Margin appears once.
(Reporter)

Comment 1

8 years ago
Works properly in Chrome on Ubuntu 9.10. Bug present in Firefox 3.5, Firefox 3.6, and Firefox 3.7 on Ubuntu 9.10. Also present in Windows build.
(Reporter)

Updated

8 years ago
Summary: Double Margins → Double Margins with Float (0 margin) and Proceeded by Element (with Top Margin)
(Reporter)

Comment 2

8 years ago
Created attachment 419972 [details]
Test Case
(Reporter)

Updated

8 years ago
Attachment #419972 - Attachment description: Shows problem and how it should look (assuming padding still fixes) → Test Case
Here's a much more minimal test-case:

data:text/html,<!DOCTYPE html>
<style>
.clear:after {
	content:"";
	display:block;
	clear:both;
}
</style>
<div style="float:left">xxx</div>
<div class="clear"></div>
<div style="margin-top:50px">yyy</div>


The behavior I'd expect, offhand, is for there to be margin in between the xxx and yyy, but xxx should be at the top of the page.  This is what WebKit and Opera do.  However, Gecko has a large gap above xxx.  I've gotten this about as minimal as I easily can -- removing any one element or rule seems to cause the effect to disappear.  Also, replacing the clear div with an actual <div style="clear:both"></div> seems to cause the effect to vanish.

I'm not understanding what's happening here, so I won't confirm.  It's got to be possible to get a more minimal test-case than this, though.  I improved the summary a bit, but couldn't come up with anything good because it's still too complicated.
Summary: Double Margins with Float (0 margin) and Proceeded by Element (with Top Margin) → Unexpected extra space when margins, floats, and generated content combined in a particular way
Confirmed the extra space is still there in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.3a1pre) Gecko/20100104 Minefield/3.7a1pre, but still not sure whether it's supposed to be or what.

Comment 5

8 years ago
This sounds like a dupe of bug 451791.
(Reporter)

Comment 6

8 years ago
I'm going to have to agree with philippe. Looks like this bug has been around for over a year and still hasn't been fixed. Perhaps the test cases provided here can help to solve it.

For example, in my original test case, the margin is fixed by with a padding on the wrapper (see provided test case - 3rd example).
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 451791
You need to log in before you can comment on or make changes to this bug.