Tolonath: IE streikt mal wieder

Beitrag lesen

Servus,
hab gestern ein Grundloyaut gebastelt.
Ein div (orange) wird beim onclick über 90% der Fläche gestreckt.
Die anderen divs werden beim onclick wieder hervorgehoben.
Soweit funktioniert das in allen Browsern bis auf den IE.

Könnte mir ein JS-Profi nen Tip geben an was es liegt?

gruß
Tolonath

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title></title>  
<style type="text/css">  
<!--  
html, body {  
background-color: black;  
margin: 0;  
padding: 0;  
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */  
}  
.game {  
position:absolute; top:0%; right:60%; bottom:90%; left:0%;  
background-color: orange;   z-index:1;  
}  
.game:hover {  
background-color: white;  
}  
.links {  
position:absolute; top:10%; right:60%; bottom:30%; left:0%;  
background-color: red;  
}  
.mitte {  
position:absolute; top:0%; right:40%; bottom:30%; left:40%;  
background-color: blue;  
}  
.rechts {  
position:absolute; top:0%; right:0%; bottom:30%; left:60%;  
background-color: green;  
}  
.unten {  
position:absolute; top:70%; right:0%; bottom:0%; left:0%;  
background-color: yellow;  
}  
-->  
</style>  
  
  
<script language="JavaScript">  
<!--  
function vor (was) {  
    var ind=0;  
    var indo=0;  
  
       for (i=0; i<5;i++)  
       { indo = eval(document.getElementsByTagName("div")[i].style.getPropertyValue("z-index"));  
         if (ind <= indo) {  
          ind = indo;  
         }  
       }  
    ind=ind+1;  
    document.getElementsByName(was)[0].style.zIndex = ind;  
}  
  
  
function game () {  
    vor ("game");  
    document.getElementsByName("game")[0].style.width = "90%";  
    document.getElementsByName("game")[0].style.height = "90%";  
    document.getElementsByName("game")[0].style.right = "0%";  
    document.getElementsByName("game")[0].style.left = "0%";  
    document.getElementsByName("game")[0].style.bottom = "";  
    document.getElementsByName("game")[0].style.marginLeft = "auto";  
    document.getElementsByName("game")[0].style.marginRight = "auto";  
    document.getElementsByName("game")[0].style.top = "0%";  
    document.getElementsByName("links")[0].style.top = "0%";  
}  
//-->  
</script>  
</head>  
<body style="background-color:blue" bgcolor="red" >  
  
<div id="game" class="game" name="game" onclick='game()'>Game</div>  
<div id="links" class="links" name="links" onclick="vor('links')">links</div>  
<div id="mitte" class="mitte" name="mitte" onclick="vor()">mitte</div>  
<div id="rechts" class="rechts" name="rechts" onclick="vor('rechts')">rechts</div>  
<div id="unten" class="unten" name="unten" onclick="vor('unten')">unten</div>  
  
</body>  
</html>