CSS: 3 Spalten Layout, Problem mit IE 6

Homepages, CMS, Templates, Web Based Programming, Webhosting, Gameserver

Moderatoren: coolmann, chillmensch

Benutzeravatar
schmidtsmikey
Site Admin
Beiträge: 8969
Registriert: 08.12.2003, 21:50
Wohnort: Hamburg
Kontaktdaten:

CSS: 3 Spalten Layout, Problem mit IE 6

Beitragvon schmidtsmikey » 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

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?

Benutzeravatar
chillmensch
Beiträge: 1935
Registriert: 09.03.2004, 15:49
Wohnort: Kiel
Kontaktdaten:

Re: CSS: 3 Spalten Layout, Problem mit IE 6

Beitragvon chillmensch » 23.08.2008, 14:12

Es gibt kleine Hacks für den Internet Explorer in CSS. Du musst Tags, die IE-Spezifisch sein seollen wie folgt angeben:

* html <tag> {

}

also z.B.:

* html body {
// Sonstiges
}

um für den IE spezifische Anpassungen für body zu machen. Hintergrund ist folgender:
Alle Browser ausser IE kapieren, dass vor <html> nichts kommt und ignorieren die Deklarationen dann. Der IE ist aber so dumm und interpretiert das (ob das Absicht war?). So kann man dann bei Problemen mit dem IE einfach eine eigene Konfig für IE schreiben^^


Das Problem beim IE <6 ist, dass die Breite nicht wie folgt berechnet wird:

Code: Alles auswählen

width + margin + padding + border

sondern

Code: Alles auswählen

width + margin

wenn ich mich nun recht entsinne...

Habe schon länger keine Probleme mehr mit IE und FF gehabt, deswegen hab ich das Problem nicht mehr ganz im Kopf...
Besucht doch auch mal meine persönliche Webseite
Mein letztes Projekt: Fahrschule Kiel

Benutzeravatar
schmidtsmikey
Site Admin
Beiträge: 8969
Registriert: 08.12.2003, 21:50
Wohnort: Hamburg
Kontaktdaten:

Re: CSS: 3 Spalten Layout, Problem mit IE 6

Beitragvon schmidtsmikey » 23.08.2008, 16:07

vielen lieben Dank für Deine Erläuterung!

Benutzeravatar
chillmensch
Beiträge: 1935
Registriert: 09.03.2004, 15:49
Wohnort: Kiel
Kontaktdaten:

Re: CSS: 3 Spalten Layout, Problem mit IE 6

Beitragvon chillmensch » 23.08.2008, 18:21

nicht dafür ;)
du hast mich auch bei icq drin, für webdesign-fragen kannste mich gerne ansprechen ;)
Besucht doch auch mal meine persönliche Webseite
Mein letztes Projekt: Fahrschule Kiel


Zurück zu „Webseiten, Webprogrammierung & Domains“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 7 Gäste