Mysal: css javascript auslagern ie Probleme

Beitrag lesen

Schönen Guten Tag ich bin grad dabei Javascript zu lehrnen.
Ich wollte ein kleine Übung schreiben die auch Funktioniert aller dings kann ich weder css noch Javascript auslagern da sonst der Ie nicht mehr mit spielt hätte da vieleicht wer ne Idee wie ich das beheben kann?

<!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">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
<link rel="stylesheet" type="text/css" href="test/basic.css"/>  
<script type="text/javascript" src="test/breit.js"></script>  
<script type="text/javascript">  
  
var box = new Array();  
box[0] = 'wrap1';  
box[1] = 'wrap2';  
box[2] = 'wrap3';  
box[3] = 'wrap4';  
  
var intStep  = 5;   // Schrittweite, um die das DIV in seiner Grösse geändert wird  
var intDelay = 5;   // Verzögerung in Millisekunden  
var intMin   = 0; // Min. Breite des DIVs  
var intMax   = 1000; // Max. Breite des DIVs  
var guzti = 0 ;  
var objDiv = 0 ;  
  
function show(id)  
{  
	  
                for(i=0;i<box.length;i++)  
                {  
                        document.getElementById(box[i]).style.width="0px";  
						  
                }  
				if ( objDiv == 0 ) {  
	objDiv = document.getElementById(id);  
	  
					}  
	if ( guzti == 0)  {  
	guzti = document.getElementById(id).style.width;  
	setTimeout("styl()", intDelay)  
					}  
  
}  
  
function styl(id)  
  
{  
	  
	guzti = parseInt(guzti);  
					  
				if (guzti < intMax) {  
				guzti = guzti+ intStep;  
				objDiv.style.width = guzti+"px";  
				  
				if (guzti < intMax) {  
				setTimeout("styl()", intDelay)  
				}  
				else  
				{  
				objDiv = 0 ;  
				guzti = 0 ;  
				  
				}  
				  
				}  
				  
				  
}  
  
</script>  
</head>  
  
<body>  
  
<form>  
	<select>  
    	<option value="#"onclick="show('wrap1');">#Steckbrief####</option>  
        <option value="#"onclick="show('wrap2');">#Lebenslauf######</option>  
        <option value="#"onclick="show('wrap3');">#test######</option>  
        <option value="#"onclick="show('wrap4');">#ja######</option>  
    </select>  
</form>  
  
<div id="wrap1" style="display:block; width:0px; background-color:#09C; overflow:hidden;" >  
    inhaltkommthierrein  
</div>  
  
<div id="wrap2"  style="display:block; width:100px; background-color:#09C; overflow:hidden;" >  
    inhaltkommthierrein  
</div>  
  
<div id="wrap3"  style="display:block; width:0px; background-color:#09C; overflow:hidden;" >  
    inhaltkommthierrein  
</div>  
  
<div id="wrap4"  style="display:block; width:0px; background-color:#09C; overflow:hidden;" >  
    inhaltkommthierrein  
</div>  
</body>  
</html>