Doctype/clientHeight problem

**Avarus** · 01-11-2009, 12:32 PM

Hi everyone,

I'm working on a website that requires the height detection of a certain <div> named container. Another <div> should be the same height minus a small amount. I got the script for it in a seperate .js file

Code:

function height()
	{
	var height = document.getElementById('container').clientHeight - 164;
	document.getElementById('main').style.height = ''+height+'px';
	}

This works perfectly in FF, but in IE7, it just gives a gray page and some errors. When I remove the doctype, no errors are caused, but then my design gets messed up (tables and images not connecting tightly). I've read some small posts/articles about clientHeight not being probably read when doctype is used, but I didn't find any working answer yet.

When I remove the part .getElementById('container'), the page does get loaded, but then the script doesn't work (of course). Also, when I change .getElementById('container') into .body or something, the same effect occurs.

Does anyone know a solution to this annoying problem?

(btw my doctype is XHTML 1.0 Transitional)

**jscheuer1** · 01-11-2009, 03:00 PM

You are doing something else 'wrong' for IE, because this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
float: left;
width: 250px;
background-color: lightblue;
}
</style>
<script type="text/javascript">
function height()
	{
	var height = document.getElementById('container').clientHeight - 164;
	document.getElementById('main').style.height = ''+height+'px';
	}
onload = height;
</script>
</head>
<body>
<div id="container">
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
Hey there<br>
</div>
<div id="main">

</div>
</body>
</html>

works fine in both browsers.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**Avarus** · 01-11-2009, 03:13 PM

Thanks for the reply

http://www.martijnvandenende.nl/somerzin/index.html (no PHP, you should see everything here)

**jscheuer1** · 01-11-2009, 04:20 PM

The problem appears to be that as the height function is trying to determine the height, it is changing because of the AJAX load.

What appears to fix that is, first remove the call to height() from the body onload, changing it to:

Code:

<body onload="show(); getData('body.html');">

But, I'm assuming you still want it, so you can add it in after that has happened (from your js.js file):

Code:

function getData(source){
  if(request){
    var data = document.getElementById("main");
    request.open("GET",source);
    request.onreadystatechange = function(){
      if(request.readyState==4){
        data.innerHTML = request.responseText;
        setTimeout(height, 0);
      }
    }
    request.send(null);
  }
}

**Avarus** · 01-11-2009, 04:28 PM

You must be some kind of genius! It works. Strange thing is that the old script did work when the doctype was removed. Anyway, you're my hero!

Thread: Doctype/clientHeight problem

Thread Tools

Search Thread

Doctype/clientHeight problem

Bookmarks

Bookmarks

Posting Permissions