Layout Problem mit älteren Browserversionen

[goldennboy]

Hallo,

ich habe folgendes Problem:
Ich möchte das meine Seite immer 100% der Höhe des Browserfensters einnimmt.
Banner,Navbar und Fußleiste haben eine fixe Größe.
Die beiden seitlichen Bildlaufleisten und der Hauptcontainer sollten die verbleibende Höhe zwischen Banner/Navbar und Fußleiste füllen.

Ich hab das so gelöst:
Hier gehts direkt zur Seite: http://bowling-center-bode.de/rfm.htm

#bildleiste_links {
position:absolute;
width:59px;
bottom:20px;<!--/* Höhe Fußleiste */-->
top:82px;<!--/* Höhe Banner/Navbar */-->
}

#MAIN {
position:absolute;
width:782px;
bottom:20px; <!--/* Höhe Fußleiste */-->
top:82px; <!--/* Höhe Banner/Navbar */-->
margin-left:59px;
background:aqua;
}

#bildleiste_rechts {
position:absolute;
width:59px;
bottom:20px;<!--/* Höhe Fußleiste */-->
top:82px;<!--/* Höhe Banner/Navbar */-->
right:0px;
}

Im aktuellem IE und Firefox funktioniert das ganze tadellos. Im IE5 und IE6 verschwinden jodoch Bildlaufleisten und Hauptcontainer, sowie das kleine Logo oben Links.

Gibt es einen anderen Weg den gewünschten Effekt zu erzielen, der auch von älteren Browserverseionen akzeptiert wird?

[LX]

Was für den IE4 galt, ist inzwischen auch für den IE5 zutreffend: wenn Du diesen Browser in freier Wildbahn antreffen solltest, so fange ihn für ein Kuriositätenkabinett ein!

Dem IE6 würde ich nicht mehr ausreichende Bedeutung beimessen, um einen entsprechenden Fix in JavaScript zu entwickeln, der die Unmöglichkeit, top und bottom im CSS gleichzeitig vernünftig einzusetzen, behebt.

Gruß, LX

[suit]

Gibt es einen anderen Weg den gewünschten Effekt zu erzielen, der auch von älteren Browserverseionen akzeptiert wird?

Conflicting Absolute Positions

[Alexander (HH)]

Moin Moin!

Im aktuellem IE und Firefox funktioniert das ganze tadellos. Im IE5 und IE6 verschwinden jodoch Bildlaufleisten und Hauptcontainer, sowie das kleine Logo oben Links.

Ganz ehrlich: IE<6, NN<6 und so ziemlich alle alternativen Browser, die älter als fünf Jahre sind, kannst Du mal fröhlich vergessen. Wer damit noch surft, macht das entweder ganz bewußt zum Testen, oder er/sie steht einfach auf unbrauchbare Website-Darstellungen.

Der IE6 ist noch lange nicht ausgerottet, aber auch über den würde ich mir nicht sonderlich viele Sorgen machen.

Schmeiß IE7.js/IE8.js/IE9.js auf den Webserver, binde es nach Anleitung in die Seite(n) ein, und hoffe, dass die Darstellung im IE<7 besser wird.

Natürlich ist das nicht die "reine Lehre", vor allem frickelt man Dinge in die Seiten, die dort eigentlich nicht hingehören. HTML soll nur Content sein, CSS nur Design, JS nur Luxus für eine bessere Benutzbarkeit. Mit IE7.js/IE8.js/IE9.js baust Du zusätzliche Bugfixes ins HTML, die dynamisch per JS das CSS umschreiben. (Ja, das ist so gruselig, wie es klingt.)

Aber in vielen Fällen hilft das gut genug, wenn das Seitenlayout so anspruchsvoll sein soll, das IE<7 Darstellungsprobleme haben.

Natürlich braucht die Seite dann zwingend JS. Wer im (alten) IE JS ausschaltet, hat dann halt Pech gehabt. Auch da gilt: Die meisten (alten) IEs lassen JS generell zu, wer JS abschaltet, macht das bewußt und kennt die daraus entstehenden Probleme.

Nach der "reinen Lehre" baust Du ausschließlich in CSS das Layout 100% valide, dann baust Du über (valide) CSS-Hacks extra Support für alte Browser ein. Wenn die identische Optik nicht erreichbar ist, dann muß eben notfalls das Design der Benutzbarkeit geopfert werden, indem die Hacks entweder alte Browser gezielt ausschließen oder für alte Browser gewisse Styles überschreiben.

Wenn Du 100% Deiner Leser erreichen willst, mußt Du auf abgedrehte Designs verzichten. Zum Beispiel auf die ohnehin reichlich sinnfreie Vorgabe, immer 100% der verfügbaren Höhe belegen zu wollen.

Alexander