CSS: 3 Spalten Layout, Problem mit IE 6
Verfasst: 18.05.2008, 11:27
Servus liebe Community,
irgendwie rechnet der IE 6.0 die Breitenangaben beim Boxmodell falsch. Ich habe die Seite mit dem Firefox, Opera, Seamonkey, Konqueror getestet und überall wird es korrekt angezeigt! Mir ist auch die Problematik mit dem IE diesbezüglich bekannt, da ich mir folgendes durchgelesen habe: SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell. Mein Problem aber wahrscheinlich ist, dass der IE die Breite nicht zu klein, sondern zu groß berechnet.
Ich habe innerhalb eines DIV-Containers (width: 1000px) drei DIV-Container eingerichtet und deren Breiten unter Berücksichtigung von Padding, Margin, usw. so gesetzt, dass die Gesamtbreite der drei Boxen 1000px beträgt.
Dann sieht das ganze so aus:
http://freenet-homepage.de/pc-erfahrung/pce-firefox.jpg
Der IE 6.0 kriegt es mal wieder nicht korrekt dargestellt und angeblich ist für den rechten DIV-Container nicht genügend Platz, so dass dieser unterhalb platziert wird.
http://freenet-homepage.de/pc-erfahrung/pce-ie6.jpg
Das komische ist: der IE macht einen viel zu breiten Abstand nach Rechts, was wahrscheinlich die Ursache allen Übels ist. Ich muss der rechten BOX mindesten 10px wegnehmen, so dass die rechte BOX in dem rechten BEreich Platz findet.
Das ist der Auszug aus dem Quelltext
Doctype: DTD XHTML 1.0 Strict//EN
Ich habe des weiteren versucht, die mittlere BOX nur mittels margin-left: 150px und margin-right: 300px zu positionieren. Aber ohne Erfolg!
Wie kann ich dieses Problem beheben?
irgendwie rechnet der IE 6.0 die Breitenangaben beim Boxmodell falsch. Ich habe die Seite mit dem Firefox, Opera, Seamonkey, Konqueror getestet und überall wird es korrekt angezeigt! Mir ist auch die Problematik mit dem IE diesbezüglich bekannt, da ich mir folgendes durchgelesen habe: SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell. Mein Problem aber wahrscheinlich ist, dass der IE die Breite nicht zu klein, sondern zu groß berechnet.
Ich habe innerhalb eines DIV-Containers (width: 1000px) drei DIV-Container eingerichtet und deren Breiten unter Berücksichtigung von Padding, Margin, usw. so gesetzt, dass die Gesamtbreite der drei Boxen 1000px beträgt.
Dann sieht das ganze so aus:
http://freenet-homepage.de/pc-erfahrung/pce-firefox.jpg
Der IE 6.0 kriegt es mal wieder nicht korrekt dargestellt und angeblich ist für den rechten DIV-Container nicht genügend Platz, so dass dieser unterhalb platziert wird.
http://freenet-homepage.de/pc-erfahrung/pce-ie6.jpg
Das komische ist: der IE macht einen viel zu breiten Abstand nach Rechts, was wahrscheinlich die Ursache allen Übels ist. Ich muss der rechten BOX mindesten 10px wegnehmen, so dass die rechte BOX in dem rechten BEreich Platz findet.
Das ist der Auszug aus dem Quelltext
Code: Alles auswählen
<div>
[...]
<div>
<div></div>
<div></div>
<div></div>
<div></div>
[...]
</div>
</div>Code: Alles auswählen
div.container {
background: #2d69a9 url(bilder/pc-e-li-1000x5.png) 50% 50% repeat-y;
width: 1000px;
/* -36 entspricht der Höhe des Footers */
margin: 0 auto -36px;
padding: 0px;
border: 0px solid #000;
text-align: left;
min-height: 100%;
height: auto !important;
height: 100%;
}
div.content {
margin: 0;
padding: 3px 5px ;
}
div.style_links {
float: left;
width: 150px;
}
div.style_mitte {
float: left;
width: 530px;
padding: 0;
margin: 0px 5px;
}
div.style_rechts {
float: right;
width: 300px;
margin: 0;
}Doctype: DTD XHTML 1.0 Strict//EN
Ich habe des weiteren versucht, die mittlere BOX nur mittels margin-left: 150px und margin-right: 300px zu positionieren. Aber ohne Erfolg!
Wie kann ich dieses Problem beheben?
