Forum Moderators: not2easy

Message Too Old, No Replies

Firefox document.height bug w/ floats

Firefox bug? doesn't include floated elements in document.height

         

donsea

4:11 pm on Jan 26, 2007 (gmt 0)

10+ Year Member



Firefox (2.0, at least) doesn't seem to include the height of any floated elements when it computes document.height.

This code:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
<!--
function howTall() {
if (typeof document.height!= 'undefined') {
docHeight = document.height;
} else if (document.compatMode && document.compatMode!= 'BackCompat') {
docHeight = document.documentElement.scrollHeight;
} else if (document.body && typeof document.body.scrollHeight!= 'undefined') {
docHeight = document.body.scrollHeight;
}
alert (docHeight);
}

//-->
</script>

</head>

<body onload="howTall();">
<p>Hello World</p>
<div style="float: left;"><img src="somepic.jpg" width="600" height="400" border="0" /></div>
</body>
</html>

gives the correct height in IE7, but reports only the height of the <p> in Firefox.

Has anyone seen this before? Does anyone have a workaround so that I can find the actual height of the document in Firefox?

Fotiman

7:29 pm on Jan 26, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Technically speaking, I think Firefox is behaving correctly. Floating something takes it out of the flow, so therefore it's no longer 'contained'.

One option might be to add a wrapper:

<body>
<div id="wrapper">
<p>Hello World</p>
<div style="float: left;background-color: red;"><img src="somepic.jpg" width="600" height="400" border="0" /></div>
</div>
</body>

Then give it a style rule for 'overflow':

#wrapper { overflow: auto; }

And then get the #wrapper's scrollheight.
Hope that helps.