Problem bei Layout unter IE 5.5 und 6.0 .. ?!

[-anja-]

Hallo!

Hab ein großes Problem...

Und zwar funktioniert "mein" Layout in allen Browsern annähernd so wie es soll, im IE 5.5 und 6.0 allerdings nicht!

Ich habe die Spalte (rot) nach oben rechts floaten lassen. Der Textbereich (grün) hat einen rechten Margin in der Größe von der Spalte.

In fast allen Browsern stehen die beiden divs schön nebeneinander, nur in den oben genannten leider nicht..

Woran liegt das?! :/

Link zur Page: http://www.pt-net.de/cc/index.html

Bilder:

So soll es aussehen: http://png.browsershots.org/a187463aa9a8f4399ca633b789ed0366.png
(mal im IE 7.0)

Und so sieht es leider falsch aus:
http://png.browsershots.org/c2d47ffb3ea7aeb4eff640d43361909d.png

Liebe Grüße!

 

[-anja-]

Kann mir keiner helfen?

 

[heldausberlin]

Das ist der Klassiker unter den Webdesign-Problemen.
Margin wird beim IE <7 anders interpretiert.
Dadurch ist die grüne Box zu breit und rutscht durch das Floating automatisch unter die vorangehende Box.

Du musst dafür extra für diese Browser im entsprechenden CSS-Tag einen anderen Wert eingeben.

Such mal bei Google nach Browserweiche, Internet Explorer, Boxmodell

Hier ist z. B. eine Seite mit Hilfe: http://www.parterremedia.de/csswork/css-box-modell/

 

[heldausberlin]

Anders gesagt, gib einen extra Wert für die Breite der grünen Box aus.

Schreib unterhalb von:

#text {
     ...
}

folgendes:

* html #text {
   width: 100px;
}

Spiel mit dem Wert „100px“ so lange rum, bis es passt.
Dann müsste es gehen.