The code below shows a test page that shows my problem. The red part at the top (in the latest firefox and opera) is part of the html-tag. The reason the red part is there is the <P>-element. You can show this by uncommenting the style for <p> and by playing with the margins. My questions: why is the html-element extended upward to 'catch' the margin of the <P> element? Is this really part of CSS specification? This issue can be resolved in a few ways. Setting the top margin of the p element to zero is one of them. Another one making the body tag position absolute. Another one is setting padding to 1px. Questions continued: Why does setting padding help at all? <?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Monty Hall</title> <style> html { background-color: red; margin: 0px; height: 100%; } body { background-color: green; margin: 0px; /*padding: 1px;*/ width: 100%; height: 100%; /*position: absolute;*/ } /* p { margin-top: 0px; } */ </style> </head> <body> <div class="menu"> <p>something</p> </div> <div class="content"> <p>something</p> </div> <div class="footer"> <p>something</p> </div> </body> </html> Code (markup):
Some further bewilderment on my part: In the code below: Without the "overflow: auto" in the 'html'-tag, the paragraphs overflow the body. This can be shown by scrolling downward (using page-down or the 'third' mousebutton). Why is this overflow in 'html' necessary for the 'body'-overflow to work correctly? (or am I misunderstanding how it is supposed to work?) <?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Monty Hall</title> <style> html { background-color: red; margin: 0px; height: 100%; /* overflow: auto; */ } body { background-color: green; margin: 0px; width: 100%; height: 100%; overflow: hidden; } body p { margin-top: 0px; } </style> </head> <body> <p>something</p><p>something</p><p>something</p><p>something</p><p>something</p> <p>something</p><p>something</p><p>something</p><p>something</p><p>something</p> <p>something</p><p>something</p><p>something</p><p>something</p><p>something</p> <p>something</p><p>something</p><p>something</p><p>something</p><p>something</p> <p>something</p><p>something</p><p>something</p><p>something</p><p>something</p> <p>something</p><p>something</p><p>something</p><p>something</p><p>something</p> </body> </html> Code (markup):
First, remove the xml declaration. You are not serving an xml document, and the xml declaration is forbidden on an html document. That has little practical effect, but it also throws IE6 into quirks mode, where it doesn't follow the css rules properly. IE in standards mode doesn't either, but it's closer. What compelling reason do you have for putting height or width on html or body? In the normal case, neither dimensions nor overflow rules are required. cheers, gary
I believe this is not correct advice. The document is xhtml-strict and wc3 gives the following recommendation: "An XML declaration is not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents." I want the page to be restricted to the viewport. And on the side I want to understand whether the behaviour I'm seeing is according to specs or whether it is a bug.
If I were to want to restrict the document to the viewport, I'd go this way; html { overflow: hidden; background-color: red; margin: 0px; height: 100%; } body { background-color: green; margin: 0px; } Code (markup): I would think that a dimensioned body with overflow hidden would be sufficient, but obviously not. Buggy? I confess a shortage of research into the matter. As to the xml declaration, unless you do not care about IE, you are serving the document as text/html. That's an html document, not xhtml, regardless of the DTD. Served as application/xhtml+xml, it would then be an xhtml document, but IE would choke on it. Further, the xml declaration, or any character(s) preceding the DTD will cause IE6 to go into quirks mode where it interprets much of css differently. Quirks mode makes x-browser compatibility problematic. That includes problems with IE6 vs IE7, which ignores the declaration and remains in standards mode. cheers, gary
My 'research' into this matter is stumped by the fact that I cannot find anything on how the viewport and the <html>/<body> tags are related (I did find things like the html-tag inheriting the background color of the body.... that seems really against the standard.). On the <?xml?> tag thing, thanks for the info.