|
|||
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 !!! 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! |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
||||
Du wirst wahrscheinlich um eine eigene für den IE bzw Conditional Comments nicht herum kommen.
__________________
Ich bin online Kleine Erklärung warum der DOCTYPE so wichtig ist Gute XHTML/CSS Einführung Geändert von Peter Klein (08.07.2008 um 18:17 Uhr) |
|
|||
Zitat:
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. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layout funktioniert nur im Firefox :( | bryan | CSS | 2 | 01.01.2011 23:34 |
Layout Problem | AndyTrendy | CSS | 6 | 02.08.2009 23:16 |
Problem bei Layout und width:100% (IE) | klopfdreh | CSS | 8 | 13.04.2006 18:09 |
Problem mit einem CSS Layout | nARC | CSS | 20 | 21.05.2005 07:28 |
problem bei 2 spaltigem layout | epocs | CSS | 4 | 28.11.2003 19:47 |