nicht angemeldet
Layout-Problem im IE6
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;
}
-
die ich absolut positioniere.
problem #1 :D
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.
ggf ist es dieser hier: <http://www.positioniseverything.net/explorer/threepxtest.html@three pixel gap>
-
ggf ist es dieser hier: <http://www.positioniseverything.net/explorer/threepxtest.html@three pixel gap>
Hm. Komischerweise wird in diesem Link genau das Gegenteil beschrieben, also eine Dimension zu dem Element hinzugefügt...
Bei mir wird es hingegen richtig angezeigt, wenn ich die Dimension entferne (height: 180px). Dann habe ich allerdings das Problem mit der Positionierung des nachfolgenden Texts...
-