Thomas: Probleme mit Float unter IE

SELF-Forum

Probleme mit Float unter IE

Thomas
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit Float unter IE

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln