height + margin = scrollbar?

Forum Moderators: not2easy

Message Too Old, No Replies

height + margin = scrollbar?

explain to me how this could possibly be correct HTML handling

NerdBrowsersSuck

7:19 am on Feb 14, 2010 (gmt 0)

hmm why does this code result in a scrollbar in Firefox and Safari (ver 3 at least)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<HTML> 
<HEAD> 
<TITLE>Title</TITLE> 
</HEAD> 
<style> 
html, body { 
height: 100%; 
background-color: #888888; 
} 
div.x { 
margin-top: 200px; 
background-color: #ffffff; 
} 
</style> 
<BODY> 
<div class="x"> 
test 
</div> 
</BODY> 
</HTML>

tangor

7:57 am on Feb 14, 2010 (gmt 0)

Which scrollbar? the vertical or the horizontal? I get a vertical, but that is expected... and truth be known, is desired.

birdbrain

9:34 am on Feb 14, 2010 (gmt 0)

Hi there NerdBrowsersSuck,

If you do not want the vertical scrollbar to appear, code it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Title</title>

<style>
html,body {
height:100%;[blue]
margin:0 8px;[/blue]
background-color:#888;
}
div.x {[blue]
float:left;
width:100%;[/blue]
margin-top:200px;
background-color:#fff;
}
</style>

</head>
<body>

<div class="x">test</div>

</body>
</html>

Note:-
As you used capital letters for your element tags, the xhtml dtd is inappropriate. ;)

birdbrain

NerdBrowsersSuck

11:03 am on Feb 14, 2010 (gmt 0)

why in the world would a vertical scrollbar be desired...the page has one element, a div, which has a single word in it...how far will you go to excuse buggy browser behavior?

yes I know capitalization of elements is hugely significant (the page renders the same if you change it, if you remove the doctype, etc)

[edited by: NerdBrowsersSuck at 11:07 am (utc) on Feb 14, 2010]

[edited by: limbo at 11:34 am (utc) on Feb 15, 2010]

NerdBrowsersSuck

11:07 am on Feb 14, 2010 (gmt 0)

let me answer my own question: this behavior is unintentional and out of spec...adding a top margin to an element within a 100% height page should not cause a scroll bar when the element + margin fits well within the body space

of Safari, Firefox, and IE, the only browser to handle this correctly is IE...MUST BE BECAUSE IE IS WRONG AND A MARGIN IS SUPPOSED TO MAGICALLY EXTEND THE BODY HEIGHT FOR NO REAL REASON

limbo

11:31 am on Feb 15, 2010 (gmt 0)

Hi NerdBrowsersSuck.

Welcome to WebmasterWorld [webmasterworld.com] :)

Let's try and keep this discussion relaxed.

It is an odd behavior�the handling of the 100% height attributes is notoriously difficult cross-browser. There might be a sane reason why standards compliant browsers like FF display like this, or like you say, it could be a handling bug. In either case it looks to be a result of applying 100% height to both <html> and <body> tags. In addition to the solution birdbrain kindly offered these also seem to work (un-tested in IE):

1.

<style>
html, body {
background-color: #888;
}
div.x {
margin-top: 200px;
background-color: #fff;
}
</style>

<style>
html {
background-color: #ddd;
height:100%;}
div.x {
margin-top: 200px;
background-color: #ffffff;
}
</style>

Was there a reason why you needed height:100% on both the body/html? Was that to make the 100% height work in IE? (I'm nowhere near a windows box right now).

birdbrain

1:37 pm on Feb 15, 2010 (gmt 0)

Hi there NerdBrowsersSuck,

if Opera, Safari and Firefox all render the code in exactly the same manner, it may be
safely assumed that this rendition is not a bug. ;)

Also note that in the example that you supplied, you would have had a vertical scrollbar
even without the 200px margin-top given to div class="x".

This was because you did not zero the html,body top and bottom margins.

Here is another possible solution for your consideration...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Title</title>

<style type="text/css">
html,body {
height:100%;[blue]
margin:-1px 0 0 0;
padding-top:1px;[/blue]
background-color:#888;
}
div.x {
margin-top:200px;
background-color:#fff;
}
</style>

</head>
<body>

<div class="x">test</div>

</body>
</html>

birdbrain