473,380 Members | 1,225 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,380 software developers and data experts.

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

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

Sep 17 '05 #1
2 2400
[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

Sep 18 '05 #2
[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

Sep 22 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Markus Ernst | last post by:
Hi I try to build a website with a css layout. I have for example 2 div elements with a specified width and a float-left, and the 3rd div element has margin:0px which makes it extend to the rest...
0
by: Mike Kozlowski | last post by:
I have an absolutely positioned block on the top of my page, a block floated left, and a third block in the normal flow. IE6 and Mozilla 1.4 disagree on where the floated block should be placed --...
5
by: Josh Renaud | last post by:
I'm still trying to solve a problem I have experienced in Safari. This is my third post on the subject. I'm hoping someone can shed some light. The problem is that, in Safari, a table with no...
3
by: Brian | last post by:
I have a page with content, navigation, and footer divs, in that order. The nav div has position: absolute, width 8em, on green background. The other divs have an 8em green left border, such that...
0
by: jklBruin | last post by:
i'm trying to implement converting xsl-fo to pdf on a .Net page. i''m getting the error message: Root element must be root, not http://www.w3.org/1999/XSL/Transform:stylesheet here's the xsl...
3
by: Adrienne Boswell | last post by:
I am not sure which browser is doing it right, I suspect FF. Here is the CSS: td.hrs {text-align:center} td.hrs hr {float:left; width:45%; display:inline;margin-top:.5em;} td.hrs a...
2
by: blobb | last post by:
hi all, take a look to the file. http://www.vkuskofe.com/pics/ff_ie.gif this is form in table, located in DIV layer. on the left is FF and on the right is IE. as You see, FF displays it...
13
by: .... www.FocusOnPanama.com .... | last post by:
I have an annoying problem with the site I am developing. This is how I see the problem appear: In a paragraph (<P>) I start with an IMG tag that has an 'align=left' OR 'align=right' (with the...
5
by: montybytes | last post by:
Hi there, Although, I have already placed this question in the HTML/CSS section, perhaps it might be worthwhile asking the question here as well. I have a JavaScript function which retrieves...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.