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

[Axel Richter]

Hallo,

es gibt mal wieder Probleme mit CSS beim IE.
Das Problem stellt sich folgendermaßen dar:
Wenn ich markiere, ist der Text da, und beim erneuten demarkieren auch sichtbar, mitsamt Hintergrund, wenn auch nicht richtig. Ist das ein Darstellungsbug?

Ja.

Das Problem ist, dass keines Deiner DIV-Elemente eine Höhenangabe hat. Bei der Höhenberechnung ist die rendering-engine des IE am meisten kaputt. Daraus resultieren die meisten IE-Bugs.

Als Lösung gib einem der umfassenden DIVs (bei Dir sind das #umrandung oder #content) eine height:1%. Da IE height wie min-heigth rendert, ist das für ihn kein Problem.

Wenn Du das height:1%; für DIV#umrandung einsetzt, musst Du es allerdings _nur_ für den IE machen. Hier bietet sich ein separates CSS an, welches mit Hilfe von Contitional Comments nur für den IE eingebunden wird.

Beim DIV#content wäre diese Unterscheidung nicht nötig, solange hierfür kein separater Hintergrund erforderlich ist und das DIV#content mit overflow:visible (Standard) eingestellt ist.

viele Grüße

Axel

[Lutz]

Danke, das hat geholfen