Thomas: Probleme mit Float unter IE

Hallo,
ich hab mir im Netz ein Beispiel nach meinen Vorgaben entsprechend geändert, doch ich kriegs einfach nicht gebacken, dass der IE mein Layout richtig darstellt.

Das folgende Beispiel funktioniert in allen anderen Browsern nur nicht im IE 6. Im Head Bereich ordnet er die zweite Spalte nicht direkt daneben an, sondern verschiebt es nach unten, trotz float:left.

Hier der Quelltext:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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="de" lang="de">
<head>
<title>Testprojekt</title>
<style type="text/css">
*{
 padding:0;
 margin:0;
 border:0;
}
body,html{
 height:100%;
 font:0.9em Verdana, Arial, sans-serif;
 color:black;
 background:#ddd;
 text-align:left;
}
h2{
 margin:10px 0 10px 0;
 font-size:16px;
 border-bottom: 1px solid black;
}
#box{
 width:800px;
 margin:0px;
 text-align:left;
 background-color:#ccc;
   position: relative;
   min-height: 100%; /* Fuer moderne Browser */
   height: auto !important; /* Fuer moderne Browser */
  height: 100%; /* Fuer IE */
}
#header_left{

height:300px;
 width: 570px;
 float: left;
 clear: left;
}
#header_right{
 height:300px;
 width: 230px;
 margin-left:570px;
 background-color:#CC9900;
}
#navigation{
 list-style:none;
 text-align:center;
 height:25px;
 border-bottom:15px solid #5A6BBD;
}
#navigation li{
 float:left;
}
#navigation li a{
 display:block;
 width:140px;
 height:25px;
 line-height:25px;
 background:#818FCF;
 color:#fff;
 text-decoration:none;
}
#navigation li a:hover,#navigation li#active a{
 background:#FFC15F;
 color:#333;
}
ul.subnavigation{
 width:170px;
 list-style:none;
 text-align:center;
 margin:0 0 0 20px;
 border-top:1px solid #999;
}
ul.subnavigation li a{
 border-bottom:1px solid #999;
 height:22px;
 line-height:22px;
 display:block;
 color:black;
 width:170px;
 text-decoration:none;
}
ul.subnavigation li a:hover{
 background:#eaeaea;
}
#spalte_links{
 width:200px;
 float:left;
 clear:left;
}
#spalte_links h2{
 background:#5A6BBD;
 height:18px;
 line-height:18px;
 color:white;
 text-indent:10px;
 width:170px;
 margin:24px 0 1px 20px;
 font-weight:normal;
 font-size:10px;
 border:none;
}
#spalte_rechts{
 width:450px;
 margin:0 10px 0 210px;
 padding:10px 10px 4em 20px;
 background:#eaeaea;
 min-height:320px;
}

</style><!--[if IE]>
<style>
#spalte_rechts{
 height:450px;
 margin-top:10px;
}
#box{
 width:800px;
}
ul.subnavigation{
margin-left:   20px;
}
ul.subnavigation li{
 margin:         0 0 0 -20px;
 voice-family:    ""}"";
 voice-family:   inherit;
 margin:     0;
}
</style>
<![endif]--><!--[if lt IE 5.5]>
<style>
ul.subnavigation li{
 margin:         0 0 -5px -20px;
}
</style>
<![endif]--></head>

<body>
<div id="box">
<div id="header_left">
<img src="top_test.jpg" alt="" />
</div>
<div id="header_right">
AGB Impressum
</div>

<ul id="navigation">
 <li id="active"><a href="#">Button 1</a></li>
 <li><a href="#">Button 2</a></li>
 <li><a href="#">Button 3</a></li>
 <li><a href="#">Button 4</a></li>
 <li><a href="#">Button 5</a></li>
</ul>

<div id="spalte_links">
 <h2>Submen&uuml; 1</h2>
 <ul class="subnavigation">
  <li><a href="#">Subbutton 1</a></li>
  <li><a href="#">Subbutton 2</a></li>
  <li><a href="#">Subbutton 3</a></li>

<li><a href="#">Subbutton 4</a></li>
  <li><a href="#">Subbutton 5</a></li>
 </ul>
 <h2>Submen&uuml; 2</h2>
 <ul class="subnavigation">
  <li><a href="#">Subbutton 1</a></li>

<li><a href="#">Subbutton 2</a></li>
  <li><a href="#">Subbutton 3</a></li>
  <li><a href="#">Subbutton 4</a></li>
  <li><a href="#">Subbutton 5</a></li>
 </ul>
</div>
<div id="spalte_rechts">
 <h2>Urheberrecht</h2>

<p>Das betreffende Template unterliegt der <a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License</a>. Konkret bedeutet dies für Sie, dass die Lizenz Sie dazu verpflichtet, bei Nutzung des Templates den Copyrightsvermerk auf der Webseite auf ihren Textinhalt zu beschränken und zudem auf den ursprünglichen Urheber des Designs/Templates sowie die GNU General Public License hinzuweisen. Hierfür bietet sich zum Beispiel das Impressum Ihrer Seite an. </p>

</div>
</div>
</body>
</html>

Wer weiss woran das liegt.

Gruss
Thomas

  1. hi,

    Das folgende Beispiel funktioniert in allen anderen Browsern nur nicht im IE 6. Im Head Bereich ordnet er die zweite Spalte nicht direkt daneben an, sondern verschiebt es nach unten, trotz float:left.

    Hast du die abweichende Interpretation des Box Models des durch die XML-Deklaration in den Quirks Mode geschickten IE entsprechend berücksichtigt?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }