Andreas: Layout-Problem im IE6

Beitrag lesen

SELF-Forum

Layout-Problem im IE6

Andreas
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich bräuchte Eure Hilfe bei einem Layout in IE6, ich arbeite schon eine ganze Weile daran, weiß aber noch keine gute Lösung.

Hier mein Setting: Ich habe ein dreispaltiges Layout. In der Mitte kommt zuerst ein Menü, welches dynamisch generiert wird, dann folgt der eigentlich Text. Das Menü besteht aus vielen einzelnen Block-Elementen, die ich absolut positioniere.
Hier nun das Problem: das Menü steckt in einem Container der die ganze Breite des mittleren DIVs einnehmen soll und eine feste Höhe für das Menü reserviert. Das funktioniert auch in allen Browsern bis auf den IE6 wunderbar. Der IE6 verschiebt das #mainmenu-Element aus mir unerfindlichen Gründen ca. 3px nach rechts.
Das Problem verschwindet wenn ich die height-Angabe bei #mainmenu lösche. Da ich aber absolut positionierte Elemente in meinem Menü habe, muss ich irgendwie den Platz reservieren.
Kennt jemand dafür eine Lösung?

Hier ein vereinfachtes Beispiel:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de, DE" lang="de, DE">  
  <head>  
 <title>Test</title>  
    <link rel="stylesheet" href="template.css" type="text/css" />  
  </head>  
  <body>  
    <div id="page">  
      <div id="left">  
        Hallo  
      </div>  
      <div id="right">  
  Welt  
      </div>  
      <div id="center">  
  <div id="mainmenu">  
   <div class="col_main" style="top:20px;left:50px;display:block;background-color:green;">  
    Ganz viele absolut positionierte Elemente...  
   </div>  
  </div>  
  Hier kommt noch mehr Text....  
   </div>  
    </div>  
  </body>  
</html>  


  
#page {  
   width: 920px;  
   text-align: left;  
   margin: 0px auto;  
   padding: 0px;  
}  
  
#center {  
  margin: 0px 160px;  
  background-color: aqua;  
}  
  
#left {  
  width: 160px;  
  float: left;  
  background-color: yellow;  
  height: 600px;  
}  
  
#right {  
  width: 160px;  
  float:  right;  
  background-color: green;  
  height: 600px;  
}  
  
#mainmenu {  
  position: relative;  
  height: 180px;  
  font-family: 'Times New Roman',Times,FreeSerif,serif;  
  font-size: 12px;  
  background-color: red;  
}  
  
.col, .col_main, .col_active, .col_main_active {  
  position: absolute;  
  width: 200px;  
  height: 20px;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln