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

Margin collapsing rule issue.

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
10 years ago
9 years ago

People

(Reporter: Biju, Unassigned)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(11 attachments)

(Reporter)

Description

10 years ago
Created attachment 283502 [details]
fx_margin_issue.png

Margin collapsing rule issue.

First case in the attached screenshot is of an HTML 
page with just a DIV and a H1 tag inside it.
Background color the body is blue and for DIV is yellow.
margin and padding for both is 0px.
H1 tag has the standard margin-top 20px;
(we do not need to set margin-top:20px for H1
just did it to compare with IE)

Issues. 

 1.
Why there is a blue space at the top of the page?
   (there is no other element before DIV, 
    to show body's bg-color)

 2.
Why there is a scroll bar?
   (other than 100% sized DIV there is no other 
    element in body, to exceed page size than 
    the window size)

In IE it looks fine, so is this IE violating CSS std 
or is it a mozilla bug!!

I tried to put a <br> before H1, then the issue get 
solved but with a side effect of space for line break.
IE ignore this line break also.

adding 
<div style="height:1px"></div> before H1
almost solves the issue in firefox with 1 px offset.
but now IE produce an extra space one line break.
I have not tested in other browsers.

The issue may also exist when the last element have
a margin-bottom.
We may also need testing for margin-left and margin-right
also for padding in all those cases
(Reporter)

Comment 1

10 years ago
Created attachment 283503 [details]
test1.html
(Reporter)

Comment 2

10 years ago
Created attachment 283504 [details]
test2.html
(Reporter)

Comment 3

10 years ago
Created attachment 283505 [details]
test3.html
(Reporter)

Comment 4

10 years ago
Created attachment 283506 [details]
test4.html
(Reporter)

Comment 5

10 years ago
Created attachment 283507 [details]
ie_margin_ok.png
(Reporter)

Comment 6

10 years ago
Created attachment 283508 [details]
test5.html

with <div style="height:1px"></div> before H1
(Reporter)

Comment 7

10 years ago
Created attachment 283901 [details]
fx_ie_solution_test6.html
(Reporter)

Comment 8

10 years ago
Created attachment 283902 [details]
fx_ie_solution_test6x.html

Work arround which is good for IE6 and Firefox is adding following div/br combination at the beginning and end. I also work for XHTML Strict mode

<div class="size0"><br class="size0"/></div> 

<style>
.size0 {
 height:0px;
 line-height:0px;
 font-size: 0px;
 padding:0px;
 margin:0px; 
}
</style>
(Reporter)

Comment 9

10 years ago
Created attachment 283903 [details]
fx_issue_test1x.html

XHTML Strict issue example
(Reporter)

Comment 10

10 years ago
Created attachment 283905 [details]
fx_issue_test1x.png

Comment 11

9 years ago
Thank you for reporting your issue. However, this is no bug.

test1, test3: Here, the h1's top-margin collapses through the top of the div, so the body's background is shown and the element is shifted down by the size of the margin (thus you see a scrollbar).

test2, test4, test5: Since there's an element between the div and the h1, the h1's marhin can't collapse. You can see the line created by br/1px-div and the top margin of h1.

test6: top and bottom margins normally collapse. A workaround is to simply use padding. The size0 class seems rather hacky.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.