Clanintern Clanintern Clanintern

Forum

Öffentliche Foren
FORUM: Spiele & Computer THEMA: [CSS] Overflow bei IE und FF
AUTOR BEITRAG
Wheeljack

RANG Deckschrubber

#1 - 19.07 11:38

Bin grade dabei, meine Seite umzubauen und wollte dabei die Frames über Bord werfen. Mein Ziel dabei ist, das aktuelle Layout 1:1 zu übernehmen. Zuerst wollte ich iframes benutzen, um die kleinen Ad-Buttons und den Main-Content scrollbar zu lassen, hab dabei aber overflow entdeckt.

Mein Problem ist jetzt, dass sich Firefox und IE8 unterschiedlich verhalten - interessanterweise macht der IE genau das, was ich will. Der Rahmen soll das Browserfenster zu 100% ausfüllen, der Inhalt soll scrollen. Firefox bläht jedoch den Rahmen so weit auf, dass der Inhalt nicht gescrollt werden muss, dafür aber die ganze Seite.

Meine bisherige Google-Suche hat mir empfohlen, für Firefox die Angabe von min-height zu verwenden und über * html explizit eine Höhe für den IE anzugeben. Funzt aber bei mir nicht

http://wheeljack.dyndns.org/remake_test/
Schaut einfach mal selbst.
*al!ve* - irgendwo zwischen Semester 4 und 7

RANG 0wn3r

#2 - 19.07 15:18

Dazu hast du deinem #mainframe mittels "height:auto" erlaubt, die Höhe dynamisch zu variieren. Das alleine bewirkt schon, dass der Browser nie auf die Idee kommt "overflow" überhaupt auszuwerten.

Wenn du ihm allerdings ein "height:100%" geben würdest, würden sich die 100% leider nicht am td-Platz orientieren und damit wiederum eine Höhe erzeugen, die nichts mit dem Platz zu tun hat, in die das div rein soll.

Grundsätzlich musst du das ganze anders aufziehen:
* Verwende keine Tabellen sondern divs, die kannst du durch geschicktes floating ordentlich platzieren.
* Ab und zu wirst du um "position:absolute" und zugehörige Werte für top, left, right und bottom nicht herum kommen
Wheeljack

RANG Deckschrubber

#3 - 19.07 20:54

Erster Eindruck: scheiße... alles nochmal von vorne.
Zweiter Eindruck: hey... DIVs sind voll cool. Abstand von links 0, Abstand von rechts 0 -> DIV zieht sich automatisch über die gesamte Breite, kein width=100% erforderlich.

Vielen Dank für den Schubs in die richtige Richtung
Wheeljack

RANG Deckschrubber

#4 - 20.07 15:44

Hmm neues Problemchen:
ich kann jetzt die obere linke Ecke entweder mit vier DIVs machen oder mit einem DIV und einer kleinen Tabelle.

Mit DIVs hab ich im Firefox einen Unterschied von einem Pixel in der Höhe, was einen hässlichen schwarzen Strich zur Folge hat. Der IE zeigts Pixelgenau an. (siehe hier)

Mach ich eine Tabelle wie früher, so hab ich jetzt auf einmal ein Problem mit zuviel Abstand in den oberen Zellen. Das tritt bei beiden Browsern auf. Ich vermute dass hier das Strict-XHTML dahinter steckt(siehe hier).

Edit: Problem gelöst über style="display:block"
*al!ve* - irgendwo zwischen Semester 4 und 7

RANG 0wn3r

#5 - 20.07 17:49

Vergiss Tabellen, die haben im Layout nix zu suchen. Tabellen stellen tabellarisch Inhalt dar, zur Positionierung wären sie einfach "das falsche Mittel".

Tips zu divs: "float". In dem Zusammenhang muss auch "overflow:hidden" genannt werden. Bewirkt (in der Regel), dass sich umhüllende, nicht-floatende Elemente auf die Größe des innenliegenden, geflotenden Elements strecken.

Im Übrigen gehört (imho) die Navigationsleiste in ein ul/li-Konstrukt. Immerhin ist s ne Liste an Naviationspunkten. Also raus mit der Navigation aus der Tablle.

Alles was du hast "position:absolute" zu stellen ist bei dir ausnahmsweise mal erlaubt, weil du diesen Frame-Like-Effekt haben möchtest. Normalerweise würden man "schön" mit Floats arbeiten.
Wheeljack

RANG Deckschrubber

#6 - 23.07 23:55

Okay... ich hab nochmal einen Versuch gestartet und es tatsächlich geschafft, die vier Grafiken im oberen linken Container vernünftig und bündig in beiden Browsern anzuordnen (dazu orientieren sich die Untercontainer nich mehr alle an der Ecke 0,0 sondern jede an seiner Ecke. Evtl hat der Firefox da sogar einen kleinen Bug mit kleinen Grafiken?
Meine Menüliste dürfte Dich jetzt auch zufriedenstellen
Man lernt immer wieder neue Tags kennen
Sieht jetzt auch wesentlich aufgeräumter aus. Bei Gelegenheit schau ich mir die restlichen Tabellen an.