Javascript problem with IE...

So, in this new site, we have quite a complicated layout which I've stuck on z-index:-6, and then the content is just in a div which covers the relevant area of the design and floats on z:6;

As a result we need a mechanism to resize the background dependant on the height of the content. Fairly easy bit of javascript.

It works in FF, Opera, Chrome... All except IE, which for some reason throws an error in my javascript a few lines in to the function.

EDIT: Ok, apparently htmlheight isn't getting a value. clientHeight and offsetHeight are giving 0, but I made a seperate test page which just document.write()'s various different height methods to see which browser supported which, and IE gives the right value for both on that :S.

The full javascript file is (The line with the big comment of *'s after it is the one IE's saying is wrong):

Code:

---

//BROWSER CHECK
browser=navigator.userAgent;
if (browser.indexOf("MSIE") > -1){
        var browser="IE";
}else if (browser.indexOf("Firefox") > -1){
        var browser="FF";
}else if (browser.indexOf("Opera/") > -1){
        var browser="OP";
}else if (browser.indexOf("AppleWebKit/") > -1){
        var browser="CHR";
}else browser="UNK";

/*****************/

//Preload images
var pic1= new Image(0,0);
pic1.src="images/recipes-link-roll.png";
var pic2= new Image(0,0);
pic2.src="images/munch-link-roll.png";
var pic3= new Image(0,0);
pic3.src="images/blog-link-roll.png";

var trip='0';

function resize(){
        //ADJUST CONTENT BG HEIGHT
        var htmlheight = document.body.clientHeight;
        var frame =        document.getElementById("bg-table");
        if (browser != "IE") {
                frame.style.height= ((window.innerHeight / 100) * 77) + "px";
        }else{
                                document.getElementById("bg-table").style.height = htmlheight-20 + "px"; /*************************************************/
        }
       
        if (trip==1) htmlheight = htmlheight-40;
        if (htmlheight > (window.innerHeight + 30)){
                trip='1';
                frame.style.height = (htmlheight + 10) + "px";
        }
       
       
        //TINKER ITS WIDTH
        alert(browser);
        alert(browser == "IE");
        if (browser == "IE"){
                var inwidth = window.offsetWidth;
                alert(window.offsetWidth);
        }else{var inwidth = window.innerWidth;}
       
        document.getElementById("bg-content").style.width = (inwidth - ((inwidth / 100)*23.5)) + "px";
       
        //TINKER TOP CONTENT LAYERS WIDTH
        document.getElementById("main-content").style.width = (inwidth - ((inwidth / 100) * 40)) + "px";
       
}

function linkRoll(obj){
                if (obj.src.indexOf("-roll")=="-1"){ //NO ROLL
                obj.src=obj.src.substring(0,obj.src.lastIndexOf("."));
                obj.src=obj.src+"-roll.png";
        }else{
                obj.src=obj.src.substring(0,obj.src.lastIndexOf("-"));
                obj.src=obj.src+".png";
        }
}

/*** FOR MENUS ON PAGES ***/
function menuBang(id){
        if (id != "search"){
                var status = new Array();
                status = document.getElementById("menu-wrap").getElementsByTagName("div");
       
                var stat=status[id];
                stat = stat.style.display;
               
                if (stat=="") stat="none";
                       
                if (stat=='none'){
                        status[id].style.display="block";
                }else{
                        status[id].style.display="none";
                }
        }else{ //SEARCH BOX SPECIAL CASE
                var stat=document.getElementById("subsearch").style.display;
               
                if (stat=="block"){
                        document.getElementById("subsearch").style.display="none";
                }else{
                        document.getElementById("subsearch").style.display="block";
                        document.getElementById("menu-sub-searchbar").focus(); //give bar focus
                }
        }
}

function menuJump(url){
        window.location=url;
}

/*** FOR SEARCH BARS IN MENUS ***/
function submitSearch(page){
        var str = document.getElementById("menu-sub-searchbar").value;
       
        if (str==""){
                alert("Please enter a query.");
                return false;
        }else if (str.length < 3){
                alert("Please enter a query longer than 3 letters.");
                return false;
        }
       
        window.location="search/"+page+"/"+str+"/";

}

---

Obviously all the relevant bits work because its fine in all the other browsers, but there's apparently something about that line IE doesn't get.

Anyone?

Use document.documentElement.clientHeight instead of document.body.clientHeight.

Hey it worked, cheers!

for more precision:

Code:

---

document.<ELEMENT>.offsetHeight;
document.<ELEMENT>.offsetWidth;

---