Javascript not working in IE, does anyone know why?

programming web dev
1

I’m building a site with a background image that fills the browser viewport. It’s working great in Mozilla and Safari, but IE doesn’t work at all, and I have no idea why. Any ideas?

Here’s my HTML containing the Javascript…
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Resize</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>

<body onLoad="resize()" onResize="resize()">


<script language="JavaScript1.2">
    function resize() {        
        bg=document.getElementById("bg");
        cut=document.getElementById("bg_cut");    
        ratio = bg.offsetWidth/bg.offsetHeight;
        
        bg.style.position = 'absolute';
        bg.style.width = cut.offsetWidth + 'px';
        bg.style.height = '';
        bg.style.left = 0 + 'px';
        bg.style.top = Math.round((cut.offsetHeight - bg.offsetHeight))/2 + 'px';
        
        if(bg.offsetTop > 0) {
            bg.style.height = cut.offsetHeight + 'px';
            bg.style.width = '';
            bg.style.left = Math.round((cut.offsetWidth - bg.offsetWidth))/2 + 'px';
            bg.style.top = 0 + 'px';
        }        
    }
</script>




<div id="bg_cut">
    <img id="bg" src="img/background.jpg" alt="">
</div>


</body>
</html>

… and here’s the CSS.


html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/* cutting the backround to fit the browser to avoid unwanted scrollbars */

#bg_cut {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}