Hallo zusammen,
ich hab mich zu dem Thema jetzt bereits mehrere Stunden mit den Tutorials auf alistapart.com und positioniseverything.net auseinandergesetzt und diese mehrfach durchgearbeitet.
Dann habe ich mich rangesetzt und mir ein erstes Layout erstellt. Nach diversen Tests in verschieden Browsern bin ich mit dem Resultat so weit zufrieden, allerdings bereitet mir der geliebte IE -diesmal in Version 7- eine Menge Kopfschmerzen.
Was passiert? - Der IE7 kommt scheinbar nicht mit der Technik "Equal Height Columns" zurecht und zeigt mir die überstehenden Bereiche unter dem Footer an. In allen anderen Browsern wird das Entwurfslayout so dargestellt wie gewünscht.
Die Suche nach dem "Heiligen Gral" wird also mal wieder ein K(r)ampf für sich.
Ich möchte noch anmerken, dass auch diverse Beispiele der oben genannten Seiten nicht korrekt im IE7 funktionieren (obwohl sie so gekennzeichnet sind).
Vielleicht kann mir ja ein findiger Kopf mit einem Geistesblitz helfen. Wahrscheinlich seh ich den Wald nur vor lauter Bäumen mal wieder nicht.
Die von mir getesteten Browser(versionen):
Hier noch der XHTML/CSS Code für mein Problem:
Vielen Dank schonmal im Voraus.
mfg aGeNET
ich hab mich zu dem Thema jetzt bereits mehrere Stunden mit den Tutorials auf alistapart.com und positioniseverything.net auseinandergesetzt und diese mehrfach durchgearbeitet.
Dann habe ich mich rangesetzt und mir ein erstes Layout erstellt. Nach diversen Tests in verschieden Browsern bin ich mit dem Resultat so weit zufrieden, allerdings bereitet mir der geliebte IE -diesmal in Version 7- eine Menge Kopfschmerzen.
Was passiert? - Der IE7 kommt scheinbar nicht mit der Technik "Equal Height Columns" zurecht und zeigt mir die überstehenden Bereiche unter dem Footer an. In allen anderen Browsern wird das Entwurfslayout so dargestellt wie gewünscht.
Die Suche nach dem "Heiligen Gral" wird also mal wieder ein K(r)ampf für sich.
Ich möchte noch anmerken, dass auch diverse Beispiele der oben genannten Seiten nicht korrekt im IE7 funktionieren (obwohl sie so gekennzeichnet sind).
Vielleicht kann mir ja ein findiger Kopf mit einem Geistesblitz helfen. Wahrscheinlich seh ich den Wald nur vor lauter Bäumen mal wieder nicht.
Die von mir getesteten Browser(versionen):
Hier noch der XHTML/CSS Code für mein Problem:
HTML:
<!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" dir="ltr" lang="de">
<head>
<title>Layout Test</title>
<meta http-equiv="Content-Language" content="DE" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Imagetoolbar" content="no" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 10px;
text-align: center;
}
#body {
min-width: 980px;
width: 80%;
max-width: 1400px;
margin: 0px auto;
}
#page {
text-align: left;
}
#header {
height: 50px;
background: #C00;
}
#content {
padding: 0px 200px 0px 200px;
overflow: hidden;
}
#content #col1,
#content #col2,
#content #col3 {
position: relative;
float: left;
padding-bottom: 20000px;
margin-bottom: -20000px;
color: #FFF;
}
#col1 {
width: 100%;
background: #300;
}
#col2 {
width: 200px;
right: 200px;
margin-left: -100%;
background: #030;
}
#col3 {
width: 200px;
margin-right: -200px;
background: #003;
}
#footer {
clear: both;
position: relative;
background: #0C0;
}
</style>
</head>
<body>
<div id="body">
<div id="page">
<div id="header">header</div>
<div id="content">
<div id="col1">
<div id="col1c">
col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />
col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />
col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />col1<br />
</div><!--/col1c-->
</div><!--/col1-->
<div id="col2">
<div id="col2c">
col2<br />col2<br />col2<br />col2<br />col2<br />col2<br />col2<br />col2<br />col2<br />col2<br />col2<br />col3<br />col3<br />
</div><!--/col2c-->
</div><!--/col2-->
<div id="col3">
<div id="col3c">
col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />
col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />col3<br />
</div><!--/col3c-->
</div><!--/col3-->
</div><!--/content-->
<div id="footer">
footer
</div><!--/footer-->
</div><!--/page-->
</div><!--/body-->
</body>
</html>Vielen Dank schonmal im Voraus.
mfg aGeNET
Zuletzt bearbeitet:
