Gunnar Bittersmann: IE cleart falsch

Beitrag lesen

@@alle:

<!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="und" lang="und"  

>  

 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <title>TEST</title>  
  <link rel="stylesheet" type="text/css" href="myStyle.css"/>  
 </head>  
 <body>  
  <ul>  
   <li id="item1">1</li>  
   <li id="item2">2</li>  
   <li id="item3">3</li>  
   <li id="item4">4</li>  
   <li id="item5">5</li>  
   <li id="item6">6</li>  
  </ul>  
 </body>  
</html>

myStyle.css:

ul  
{  
 margin: 0;  
 padding: 0;  
 list-style: none;  
 width: 150px;  
}  
  
li  
{  
 color: white;  
 width: 42px;  
 height: 42px;  
 float: left;  
 margin: 4px;  
 display: inline;  
}  
  
#item2  
{  
 height: 72px;  
}  
  
#item1, #item4  
{  
 background: red;  
 clear: both;  
}  
  
#item2, #item5  
{  
 background: green;  
}  
  
#item3, #item6  
{  
 background: blue;  
}

Vernünftige Browser stellen das wie gewünscht dar:

┌───┐┌───┐┌───┐
│ 1 ││ 2 ││ 3 │
└───┘│   │└───┘
     │   │
     └───┘
┌───┐┌───┐┌───┐
│ 4 ││ 5 ││ 6 │
└───┘└───┘└───┘

IEs hingegen (6 & 7) denken trotz des 'clear' für #item4, dass ja für #item5 weiter oben noch Platz wäre und stellen das so dar:

┌───┐┌───┐┌───┐
│ 1 ││ 2 ││ 3 │
└───┘│   │└───┘
     │   │┌───┐
     └───┘│ 5 │
┌───┐     └───┘
│ 4 │┌───┐
└───┘│ 6 │
     └───┘

Kann man IEs irgendwie zu der gewünschten Darstellung bewegen?

Live long and prosper,
Gunnar

--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.