Probleme mit simplen CSS Layout

sidewayz · #1 (**permalink**) 10.07.2009, 18:49

Hallo zusammen,

ich hab ein paar Probleme mit einem relativ simplen CSS Layout, zu finden hier:

Seitentitel

Quelltext:

Code:

<body>
      <div style="width:450px; height: 98%; margin: 0 auto; background-color:#060606; border: 1px solid #000000;">

           <div style="width:400px; margin:auto; margin-top:15px; margin-bottom:15px; text-align:left;">Logo</div>
           <div style="width:400px; height:100px; background-color:#454545; margin:auto;"></div>
           <div style="width:400px; margin: auto;">
           <div style="width:200px; height:350px; background-color:#45F543; float:left; text-align:left; padding:5px;">
                <div style="height:95%;">
                     Testtext <br><br><br><br><br><br><br><br><br><br>
                     Testtext <br><br><br><br><br><br><br><br><br><br>
                     Testtext <br><br><br><br><br><br><br><br><br><br>
                     Testtext <br><br><br><br><br><br><br><br><br><br>fd
                </div>
                <div style="text-align:right; height:10px; border: 1px solid #000000;">BUTTON</div>
           </div>
           <div style="width:200px; height:100px; background-color:#Fb452F; float: right; text-align:left; padding:5px;">Testtext</div>
           <div style="width:200px; height:100px; background-color:#ABFFA2; float: right; text-align:left; padding:5px;">Testtext</div>
           <div style="width:200px; height:100%; background-color:#BBAFF2; float: right; text-align:left; padding:5px;">
                <div style="height:90%;">
                     Testtext
                </div>
                <div style="text-align:center; height:10px; border: 1px solid #000000;">BUTTON</div>
           </div>
           </div>

      </div>
</body>

Im IE8 wird die Seite eigentlich fast korrekt angezeigt, die lilane Box rechts unten soll aber so lang wie die Box Links werden, also automatisch verlängert werden. Die oberen beiden bleiben beide 100px hoch. Gucke ich mir jetzt die Seite im Firefox an stimmt überhaupt nichts mehr, die beiden Spalten sind nicht nebeneinander, die Linke Spalte wird nicht verlängert usw.

Erkennt da jemand auf anhieb ein Problem?

Cya

chungo · #2 (**permalink**) 10.07.2009, 20:49

Moin,

IE8 rendert deine Seite im Quirksmode und das führt zu Komplikationen. Ergänz deine Seite um einen korrekten Doctype, damit auch IE8 im standardscompliant mode rendert - ohne den Doctype fällt er in den Quirksmode, der ein anderes Boxmodell verwendet:

DOCTYPE-Switch und seine Auswirkungen
Quirks mode

Danach schaust du dir das Padding der kleineren Boxen nochmal an. Du verwendest 200px breite Boxen mit jeweils 5px Padding, macht daher 2x 5px Padding links und rechts und die Boxen erhalten eine Breite von 210px - daher funktioniert auch dein Float nicht und "bricht um" - jetzt auch im IE8.

Danach meld dich nochmal.

Viele Grüße!

PS: Überlege dir auch, ob du nicht vielleicht Klassen, IDs und externe Stylesheets verwenden möchtest

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Tips & Tricks	Webnauts	Ressourcen	0	25.08.2006 23:04
Layout: Tabelle -> CSS \| ohne Schönheitsfehler?	Knickedi	CSS	20	05.08.2006 02:18
Layout Probleme	SchwarzerMagier	CSS	18	01.08.2006 13:06
CSS Layout mit abgerundeten Ecken	dimension	CSS	3	17.04.2005 18:05
CSS = Bug? : Einfaches Layout nicht möglich?	trequ	CSS	16	14.09.2004 17:06