More on the root element and the initial containing block - vertical margin collapsing

[Stanimir Stamenkov]

I'm trying to clear some sizing issues relative to the initial
containing block and the root document element. The sample document I'm
trying with:

http://stanio.info/viewport_fill.html

Basically, for some tests I want to specify the height of an example
DIV element inside the BODY using percentages of the viewport height.
For this to work the BODY container should fill the viewport height
where I'm using:

html, body { height: 100% }

I've set the margins and padding of the HTML and BODY elements to 0
(zero) so the content height would be equal to the boxes height.

Now, the example DIV element has top and bottom margins of 3em and
'height: 30%'. What I observe in Mozilla (actually SeaMonkey 1.0 Alpha)
and Opera 8.02 is the appearance of a vertical scroll-bar for the
viewport adding about 3em of height to scroll. IE 6 doesn't show a
scroll-bar.

Further I've removed (set to zero) the top margin of the example DIV
element and the scroll-bar has disappeared in Mozilla but there is
still about 3em to scroll in Opera. Additionally removing the bottom
margin removes the scroll from Opera, too.

This seems to be a vertical margin collapsing issue since adding a
border to the BODY or HTML element causes the additional scroll height
to be as much as the top and bottom border heights. Probably Opera
doesn't get it right at all given the two possible cases I'll describe.

1. AFAIK that's not really specified but I expect the viewport to
establish an implicit border where the margin of the root element
doesn't collapse with anything "upstairs" so that's why I think IE 6 in
this case is correct.

2. Mozilla seems to collapse the top margin of the example DIV with the
no margin of the parent BODY and HTML elements but it adds that margin
to the void extending the initial containing block height.

Opera is inconsistent because it adds the bottom margin to the void
even if it doesn't reaches the edges of the parent BODY and HTML
margin. Further it adds only the top or bottom margin height -
whichever is greater.

What do you think is the correct calculation/rendering?

--
Stanimir

[Stanimir Stamenkov]

[x-posting to n.p.mozilla.layout, followup-to n.p.mozilla.layout]

/Stanimir Stamenkov/:

http://stanio.info/viewport_fill.html

Now, the example DIV element has top and bottom margins of 3em and
'height: 30%'. What I observe in Mozilla (actually SeaMonkey 1.0 Alpha)
and Opera 8.02 is the appearance of a vertical scroll-bar for the
viewport adding about 3em of height to scroll. IE 6 doesn't show a
scroll-bar.

1. AFAIK that's not really specified but I expect the viewport to
establish an implicit border where the margin of the root element
doesn't collapse with anything "upstairs" so that's why I think IE 6 in
this case is correct.

2. Mozilla seems to collapse the top margin of the example DIV with the
no margin of the parent BODY and HTML elements but it adds that margin
to the void extending the initial containing block height.

What do you think is the correct calculation/rendering?

--
Stanimir

[Stanimir Stamenkov]

[x-posting to c.i.w.a.stylesheets, followup-to c.i.w.a.stylesheets]

/Stanimir Stamenkov/:

http://stanio.info/viewport_fill.html

Now, the example DIV element has top and bottom margins of 3em and
'height: 30%'. What I observe in Mozilla (actually SeaMonkey 1.0 Alpha)
and Opera 8.02 is the appearance of a vertical scroll-bar for the
viewport adding about 3em of height to scroll. IE 6 doesn't show a
scroll-bar.

I think I've got it. I've made another sample:

http://stanio.info/viewport_fill2.html

So, the DIV element is collapsing margin with the BODY element (as seen
by differntly colored backgrounds) were the extra height comes from.
Turns out Internet Explorer to be incorrect(?) in this case, acting
somewhat between the initial CSS 2 recommendation and the latest CSS
2.1 revision. Opera still gives that strange bottom margin when the
root (HTML) element doesn't have a border:

http://stanio.info/viewport_fill_opera1.html
http://stanio.info/viewport_fill_opera2.html

A somewhat consistent behavior is achieved setting 'overflow: auto' on
both HTML and BODY elements:

http://stanio.info/viewport_fill3.html

In this case I'm not really sure how the "margin collapsing" is
supposed to work (between the element with 'overflow: auto' and the
child element which margin overflows) and Opera is far different than
Moz or IE, again:

http://stanio.info/viewport_fill4.html

--
Stanimir