body height:100%, and long div in height - ie6 is ok, firefox not ok. - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

body height:100%, and long div in height - ie6 is ok, firefox not ok.

anti_ge

11:46 am on Oct 2, 2006 (gmt 0)

The following code:

<html> 
<head> 
<style> 
body {margin:0; 
padding:0; 
height:100%; 
background-color:#990033; 
} 
</style> 
</head> 
<body> 
<div style="position: absolute; top:0;left:0;height:100%; width:100%;"> 
<div style="position:relative;margin:0 auto; background-color:#ffffff; height:100%;text-align:left;width:780px;"> 
Sample<br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /> 
Sample<br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /> 
Sample<br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br />Sample<br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br />Sample<br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /> 
</div> 
</div> 
</body> 
</html>

is giving different results in ie6 and firefox. What is wrong?
How can someone make the behaviour of ie6 to be enforced in firefox and other browsers, too?

Thank you,
G.

AWildman

11:54 am on Oct 2, 2006 (gmt 0)

I got the page to appear the same like so:
<html>
<head>
<style> body, html {margin:0; padding:0; height:100%; background-color:#990033; }
</style>
</head>
<body>
<div style="position: relative;margin:0 auto; height:100%; width:100%;">
<div style="position: absolute; top:0;left:0;height:100%; width:100%;">
<div style="position:relative; background-color:#ffffff; text-align:left;width:780px;"> Sample<br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /> Sample<br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /> Sample<br /><br /><br /><br /><br /><br /><br /><br /> <br /><br />Sample<br /><br /><br /><br /><br /><br /><br /> <br /><br /><br />Sample<br /><br /><br /><br /><br /> <br /><br /><br /><br /><br />
</div>
</div>
</div>
</body>
</html>

Don't know if that is how you intended it to look though.

anti_ge

12:27 pm on Oct 2, 2006 (gmt 0)

Thank you for your help!

Based on your idea, I found it...

I was looking for:
<div style="position: relative; height:100%; width:100%;">
<div style="position: absolute; top:0;left:0;height:100%; width:100%;">
<div style="position:relative; margin:0 auto; background-color:#ffffff; text-align:left;width:780px;">

to have the same behaviour...

icantthinkofone

1:22 pm on Oct 2, 2006 (gmt 0)

The problem is not getting all other browsers in the world to behave like IE6 but getting IE6 to behave properly with the rest of the world. Are you using a proper doctype? If not, then IE is in quirks mode and using a broken box model.

Setek

5:02 am on Oct 3, 2006 (gmt 0)

is giving different results in ie6 and firefox. What is wrong?

There's nothing wrong - Firefox is displaying the height property the way it should.

That is to say, your

body

is displaying at 100% of its parent element -

html

(which, incidentally, has a height of its contents - so the exact height of body is now the exact height of

html

, and 100% of

html

is not 100% of viewport.)

AWildman showed you how to fix this, because he specified

html

to also be 100%, which (as it has no parent element) assumes the height to be 100% of the viewport, and as

body

is 100% of the parent element

html

, body also becomes 100% of the viewport.

Why does IE render this differently? Because it is incorrectly rendering the proportional height property value.

I hope this explains more in addition to AWildman's reply, as to why the solution works :)

[edited by: Setek at 5:05 am (utc) on Oct. 3, 2006]