Internet Explorer mal wieder

[Lutz]

Hi Gemeinde,

es gibt mal wieder Probleme mit CSS beim IE.

Das Problem stellt sich folgendermaßen dar:
Ich sehe links direkt am Rand des Fensters eine rote Linie, dann rechts daneben einen weißen Bereich, dann kommt der Footer, der Header und der Text ist gar nicht zu sehen. Das ganze streckt sich über die gesamte Fensterbreite und hört ganz rechts wieder auf.
Wenn ich markiere, ist der Text da, und beim erneuten demarkieren auch sichtbar, mitsamt Hintergrund, wenn auch nicht richtig. Ist das ein Darstellungsbug?

Das ist der Code dazu:
HTML:

  
  <div id="umrandung">  
  
   <span id="header">UEBERSCHRIFT</span>  
  
   <span id="unternavi">  
    <a href="#">[1]</a>  
    <a href="#">[2]</a>  
    <a href="#">[3]</a>  
   </span>  
  
   <div id="content">  
  
    <ul id="navigation">  
     <li><a href="#">Navi1</a></li>  
     <li><a href="#">Navi2</a></li>  
     <li><a href="#">Navi3</a></li>  
    </ul>  
  
    <p>  
     <h1>Inhaltstexte kommen hier rein</h1>  
     <br><br>aaaaa<br><br>aaaaa<br><br>aaaaa<br><br>aaaaa<br><br>aaaaa<br><br>aaaaa<br><br>aaaaa<br><br>aaaaa<br><br>  
    </p>  
  
   </div>  
  
   <span id="footer">  
   <a href="#">[1]</a>  
   <a href="#">[2]</a>  
   <a href="#">[3]</a>  
   </span>  
  
  </div>  
  

CSS

  
html, body  
{  
 height:100%;  
  
 font-size:12px;  
 font-family:Sans,Arial,Helvetica,Verdana;  
  
 margin:0;  
 background-image:url(bilder_hp/bg_versuch2.jpg);  
 color:#000;  
}  
  
a  
{  
 color:#000;  
 text-decoration:none;  
}  
a:hover  
{  
 color:#f00000;  
 text-decoration:underline;  
}  
  
  
  
#umrandung  
{  
 border-left:2px solid #ff0000;  
 border-right:2px solid #ff0000;  
 margin:0 12% 0 12%;  
 background-color:#fff;  
  
}  
  
  
  
#header  
{  
 display:block;  
 text-align:left;  
 padding:12% 0 0 .5%;  
 color:#EE7621;  
 font-weight:bold;  
 border-bottom:1px solid #ff0000;  
 font-size:30px;  
 background-image:url(bilder_hp/bg_head_versuch1.jpg);  
 background-repeat:repeat-x;  
 background-position:bottom left;  
}  
  
  
  
#unternavi  
{  
 display:block;  
 text-align:center;  
 padding:.5% 0 .5% 0;  
 border-bottom:1px solid #ff0000;  
 background-color:#fff;  
}  
#unternavi a  
{  
 padding:0 .2% 0 .2%;  
}  
  
  
#content  
{  
 background-color:#fff;  
}  
#content p{  
 float:right;  
 margin-left:2%;  
}  
  
#navigation  
{  
 border:1px solid black;  
 list-style-type:none;  
 width:20%;  
 margin-left:0;  
 margin-right:2%;  
 float:left;  
 background-color:#EE7621;  
}  
#navigation li{  
 margin-left:0;  
 margin-top:2%;  
 margin-bottom:2%;  
}  
  
  
#footer  
{  
 text-align:center;  
 border-top:1px solid #ff0000;  
 display:block;  
 clear:both;  
 padding:.5% 0 12% .5%;  
 background-image:url(bilder_hp/bg_foot_versuch1.jpg);  
 background-repeat:repeat-x;  
}  

Ihr habt den Code, demnach muss ich euch ja nicht beschreiben wie es aussehen sollte. Firefox und Opera machens richtig (naja, bis auf die Navigation, aber das ist eine andere Geschichte).

Viele Grüße
euer Lutz