nicht angemeldet
Falsche Positionierung eines div-Blocks im IE
Moin moin!
Ich hab mir n dreispaltiges Layout gebastelt, welches in der linken Spalte mehrere untereinander folgende Elemente enthalten soll, in der Mitte der eigentliche Inhalt steht und rechts noch ein zusätzlicher Rand eingefügt wird.
Das Ergebnis laesst sich auf rw-lamersdorf.de/pre/prepre bewundern.
Zur Verdeutlichung meines Problems habe ich noch ein paar "Huehner" eingefuegt.
Im Firefox wird die mittlere div-Box bündig mit den Boxen links und rechts angezeigt, der IE beginnt die mittlere Box leider erst unter den beiden anderen.
Zur Verdeutlichung habe ich noch diveres Rahmen eingefuegt. Ich weiss nicht wirklich, was ich falsch mache.
Vielen Dank schonmal fuer die Hilfe!
Gruß
fraenzer
<!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">
<head>
<title>3 Spalten mit Kopf und Fuss</title>
<meta http-equiv="Content.Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
body {
margin:0; padding:0;
font: 77% sans-serif;
}
#footer {
width:900px;
height:121px;
margin:auto; padding:0;
background: url(finalFooter.gif) bottom left no-repeat;
}
#main1 {
width:900px;
margin:auto; padding:0;
background: url(finalLeft.gif) top left repeat-y;
}
#main2 {
margin:0; padding:0;
background: url(finalRight.gif) top right repeat-y;
}
#left {
float:left;
width:194px;
margin:0; padding:0px;
font-size:0.9em;
}
#right {
float:right;
width:77px;
margin:0; padding:0px;
font-size:0.9em;
}
#middle {
width:570px;
margin:0 215px;
padding:10px;
background: #FFCC99;
font-size:0.9em;
}
#leftCorner {
margin:0; padding:0px;
height:105px;
background: url(finalLeftTopCorner.gif) top left repeat-y;
}
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:0px none;
margin:0; padding:0;
background:transparent;
}
h1,h2 {
font-size: 1.7em;
margin:0;
}
p {
margin:0.5em 0;
}
/* ]]> */
</style>
</head>
<body>
<div id="main1">
<div style="border:1px solid #000000" id="main2">
<div style="border:1px solid #FF0000" id="left">
<div id="leftCorner"></div>
</div>
<div style="border:1px solid #FF0000" id="right"></div>
<div style="border:1px solid #FF0000" id="middle">
<h2>Mittlere Spalte</h2>
</div>
<div class="cleaner"> </div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
-
Lustig ist, dass wenn ich im CSS-Part
#middle {
width:570px;
margin:0 215px;
padding:10px;
background: #FFCC99;
font-size:0.9em;
}die Werte bei margin z.B. auf margin:0 110px; stelle,
mir im Internet-Explorer die mittlere Splate ebenfalls oben angezeigt wird, jedoch erst hinter der linken Spalte. Der Firefox stellt die Sache dann natürlich anders und zwar korrekt dar, er legt die mittlere Spalte dann teilweise über die Linke.Mhm!!!
-
Das Problem hat sich in Luft aufgelöst. Ich habe bei der Eigenschaft margin ein wenig was durcheinander gebracht und deshalb die Astände verhauen!
-
Hallo,
verwende im DocType nicht den Transitional Mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sondern den Strict Mode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
dann berechnet der IE6 die Abstände korrekt und dein Layout müsste wie im Firefox oder Opera aussehen... alternativ nicht den größten Bug Browsr aller Zeiten, den IE, verwenden ;-)
-
Hi,
verwende im DocType nicht den Transitional Mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sondern den Strict Mode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
dann berechnet der IE6 die Abstände korrekt
es handelt sich hierbei nicht um Modi, sondern unterschiedliche XHTML-Spezifikationen.
Bei beiden geht der IE in den standardkonformen Modus; bei XHTML Transitional sogar dann, wenn die DTD weggelassen wird.freundliche Grüße
Ingo
-