fraenzer: Falsche Positionierung eines div-Blocks im IE

Beitrag lesen

SELF-Forum

Falsche Positionierung eines div-Blocks im IE

fraenzer
– Informationen zu den Bewertungsregeln

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">&nbsp;</div>
                 </div>
         </div>
         <div id="footer"></div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln