Results 1 to 5 of 5

Thread: Doctype/clientHeight problem

  1. #1
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Doctype/clientHeight problem

    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)

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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);
      }
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •