Problem mit 3-spaltigem Layout im Firefox
 

Hallo Leute,

mein erster Thread hier und gleich, für mich jedenfalls, mit einem echt heftigen Problem und natürlich der Hoffnung, daß Ihr mir dabei helfen könnt.

Ich bin erst kürzlich in das Tabellenlose-Seiten-Layout mittels CSS eingestiegen und habe da leider noch nicht so viel Ahnung auf diesem Gebiet. Ich habe auch bereits unzählige Internetseiten (deutsch und englische) und auch die Forensuche zum meinem Problem durchforstet, habe aber leider nichts finden können, was den bei mir auftretenden Fehler beseitigen konnte.

Folgendes ist nun das Problem:
Eigentlich war/ist ja immer der IE (respektive speziell die 6'er-Version) der Browser, der bekanntlich die meisten Zicken macht. Hier ist es aber nun leider ungewohnterweise der Mozilla Firefox (Version 1.5 und 2.0, das sind die Versionen, die mir zum Testen zur Verfügung stehen; getestet wird auch auf IE6 und IE7).

Ich möchte also eine 3-spaltige Seite gestalten (mit Banner, Menüleiste und Footer dadrüber, bzw. drunter; alle Elemente sollen mit Grafiken hinterlegt sein), wobei alle drei Spalten eine feste Breite haben sollen (hinterlegt mit den Grafiken: Header, 1-Pixel-Slice -zum nach unten kaskadieren- und Footer) und sich aber durch den Inhalt (Text o.ä.) dann nach unten hin flexibel erweitern sollen und den Footer, der direkt am Ende sitzt, je nach Größe der linken, rechten oder der Mittelbox, entsprechend verschieben soll.

Da ich nicht davon ausging, daß der Firefox irgendwelche Probleme machen könnte, hatte ich erstmal den IE im Auge und habe es mittels "IE-Hack" hinbekommen, alle drei Spalten nebeneinander zu platzieren. Siehe dazu Screenshot des Seitenaufbaus (so wie er auch im Endeffekt sein soll):

Screenshot der Seite im INTERNET EXPLORER 6

Aber im Firefox sieht es leider nun so aus:

Screenshot FIREFOX 1.5/2.0


Und ich bekomme es einfach ums Verrecken nicht hin, daß im Firefox die rechte Box sich, wie im IE richtig zu sehen, ordnungsgemäß oben links an der Mittelbox ausrichtet :ranting: !!!
Ich habe mit meinem bisherigen Wissen jetzt schon so viel rumexperimentiert und bin nun völlig verzweifelt. Was die beiden Screenshots zeigen, ist das Weiteste wie ich selber kommen konnte, ohne das das Layout wieder in einem oder dem anderen oder beiden Browsern völlig zerschossen ist.

Wie bekomme ich jetzt die rechte Box im Firefox an die richtige Stelle, ohne das die Seite sich im IE zerschießt oder sonst noch etwas fehlerhaft dargestellt wird, spirch das beide Browser also exakt das Gleiche darstellen???

Hier nun die Live-Seite (index.html):

Hier die Seite

Und dazu der CSS-Code:

Hier die CSS-Datei


Ich würde mich wirklich sehr freuen, wenn Ihr mir bei der Lösung behilflich sein könntet, ich bin echt total und völlig verzweifelt.
Vielen vielen Dank im voraus für die Mühe!

Du hast nur dem IE < 7 für alle drei Spalten Float gegeben.
Die anderen Browser bekommen nur für erste Spalte das Float. Die dritte kann so nicht neben der zweiten stehen.

Du solltest zuerst ein Stylesheet für richtige Browser schreiben -- und dich danach erst mit den Fehlern des IE befassen.

Danke für die Antwort. Hast Du einen Tipp, wie die CSS aussehen muss, damit es in beiden Browsern funktioniert?

Du wirst wahrscheinlich um eine eigene für den IE bzw Conditional Comments nicht herum kommen.

Floate alle drei Spalten, so wie du es bisher nur für IE < 7 tust! Siehe oben.
Lösche alles, was du für IE < 7 im Stylesheet hast.
Schreib zuerst ein Stylesheet für alle Browser.
Wenn du soweit bist und Fehler im IE feststellst, die du nicht lösen kannst: komm wieder und frag nach.