358651 - div background not showing when an inner div has a margin

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[nivek98]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0

This is a little hard to explain with words, but I have created a very simple example of the bug that I will attach.

In My Example:
#page's background is not being rendered all the way to the top of the body, as it should be.  This happens when #header has a margin set on it.

Workarounds:
By setting a border on #page I have temporarily solved the problem.

Reproducible: Always

Steps to Reproduce:
1.Download the attached file 'example.html' and open.

Actual Results:  
There is a part of the #page div that is not getting it's background rendered.

Expected Results:  
The border should have extend up to the top of the body.

Comment 1

[nivek98]

Attachment: The example of this bug.

Comment 2

[nivek98]

One additional note, I just realized this happens in both Quirks and Standards modes, if that is of any help in tracking down the cause.

Comment 3

[Gérard Talbot]

I'm not sure I understand the problem you have.

        #page {
            background: #DDDDDD;
            width: 790px;
        }

        #header {
            border: 1px solid #0000FF;
            margin-top: 5px;
        }

The header div background color in its margin-top will be the page div's background color.

"'background' refers to the background of the content, padding and border areas. Border colors and styles are set with the border properties. Margins are always transparent. (...) the parent box's background will shine through by default because of the initial 'transparent' value on 'background-color'."
CSS 2.1, Section 14.2 The background 
http://www.w3.org/TR/2006/WD-CSS21-20060411/colors.html#q2

Comment 4

[nivek98]

The problem is that it's not doing what the CSS spec says it should be doing.  At least in Firefox 2.0 and Firefox 1.5.0.7, the top of the page div is not being rendered.

Page has no margin on top, and therefore, there should be no space between the top of the body(which also has no margin or padding) and the top of page. However, the amount of space I set as a margin-top on header seems to be getting applied to page instead.

If you added a border to the left and right sides of page, you'll notice that they too cut off 5px from the top edge of the body.

However, for some reason adding a border-top to page will get rid of the problem, causing proper rendering of page, but I don't want a border on the top.

I am attaching a slightly revised example that I think will better illustrate the problem, as well as a screenshot of how I would expect it to be rendered.

Comment 5

[nivek98]

As I went to take screenshots of my new example, I realized that the problem happens on the bottom as well.  Like I said, it's hard to explain, so hopefully the screenshots make sense.

Comment 6

[nivek98]

Attachment: Revised Example

Comment 7

[nivek98]

Attachment: This is how I think it should be rendered

Comment 8

[nivek98]

So is this just gonna be ignored or what?  I posted a week ago and nothing has happened yet.

Comment 9

[Gérard Talbot]

> it's not doing what the CSS spec says it should be doing.

CSS 2.1, Section 8.3.1 Collapsing margins
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
http://www.w3.org/TR/CSS21/visudet.html#normal-block

Several other bug reports have been resolved for the same kind of bug before, with same testcases too, with same explanations, with same workaround explained, with same resolutions.

bug 331864, bug 324205, bug 321841 (attachment 207168 [details]), bug 312698, bug 299938 (?), bug 275388, bug 256175, bug 250189, bug 241581, bug 222059, bug 161654, etc. I assure you there are other duplicates exactly like that.

"IE/Windows is notoriously buggy on margin collapsing" Boris Zbarsky  2002-08-08
and 4 years later, this was repeated in IE Blog, 2006-08-22, regarding IE7:
"margin-collapsing is still incorrect"
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx#713072

Resolving as INVALID