Hallo
Ich hab ein kleines Problem bei meinem Design mit dem IE6, in FF3 und IE7 tritt das Problem nicht auf (welch ein Wunder).
Im Maincontent hab ich ein 3 Spalten Layout verschachtelt, nur für die Background pictures, im IE6 verschiebt sich der Container ganz links, und ich hab keine Ahnung warum.
Am besten seht selbst auf :
Soul-Side Männedorf mit dem IE6 und mit z.B. Firefox.
Hier der HTML Code:
Code:
<?xml version="1.0" ?>
<!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"
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="kokson">
<title>Soul-Side Männedorf</title>
<!--[if lte IE 6]>
<style type="text/css">
#content { height: 500px;}
#content_middle {height: 500px;}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="navi"></div>
<div id="content">
<div id="content_left">
<div id="content_left_inner"></div>
<div id="content_right">
<div id="content_middle">
<div id="maincontent-left"></div>
<div id="maincontent-right">
<!--<div id="ruler"></div>
<div class="box">
<div><div><div><div><div><div><div>
<div class="inhalt">
</div>
</div></div></div></div></div></div></div>
</div> -->
</div>
<div class="nofloat"></div>
</div>
<div id="content_right_inner"></div>
</div>
<div class="nofloat"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Und hier das CSS File:
Code:
/* Hauptdesign */
body {
font-family: Helvetica, sans-serif, Arial;
text-align:center;
padding:0;
margin:0;
background-image: url(pictures/background.png);
background-repeat: repeat-x;
}
#maincontainer {
text-align:left;
margin:0 auto 0 auto;
width: 859px;
}
#header {
width: 859px;
height: 218px;
background-image: url(pictures/Header.png);
}
#navi {
width: 859px;
height: 19px;
background-image: url(pictures/navi.png);
}
#content {
width: 859px;
min-height: 500px;
background-image: url(pictures/back_content.png);
background-repeat: repeat-y;
}
#content_left {
background-image: url(pictures/verlauf_left.png);
background-repeat: no-repeat;
}
#content_left_inner {
width: 33px;
float:left;
}
#content_middle {
/*padding: 10px 10px 10px 10px;*/
min-height: 500px;
}
#content_right {
width: 826px;
float: right;
background-image: url(pictures/verlauf_right.png);
background-position: right top;
background-repeat: no-repeat;
}
#content_right_inner {
width: 26px;
float:right;
}
#maincontent-left {
width: 200px;
float: left;
}
#maincontent-right {
width: 600px;
margin-left: 200px;
}
#footer {
width: 859px;
height: 27px;
background-image: url(pictures/footer.png);
}
#ruler {
width: 570px;
height: 3px;
background-image: url(pictures/header_line.png);
}
/* Content Box */
div.box {background:url(pictures/box_left.png) repeat-y; background-color: white; width: 570px;}
div.box div {background:url(pictures/box_right.png) right repeat-y;}
div.box div div {background:url(pictures/box_top.png) repeat-x;}
div.box div div div {background:url(pictures/box_bottom.png) bottom repeat-x;}
div.box div div div div {background:url(pictures/box_top_left.png) left top no-repeat;}
div.box div div div div div {background:url(pictures/box_top_right.png) right top no-repeat;}
div.box div div div div div div {background:url(pictures/box_bottom_left.png) left bottom no-repeat;}
div.box div div div div div div div {background:url(pictures/box_bottom_right.png) right bottom no-repeat;}
div.inhalt {
padding: 10px 10px 10px 10px;
min-height:100px;
}
/* Hilfs zeugs */
.nofloat {
overflow: hidden;
clear: both;
height: 1px;
margin: -1px 0 0 0;
font-size: 1px;
}
Kennt jemand das Problem und die Lösung?