| 

.NET C# Java Javascript Exception

3
Oft ist es ja so, dass eine hier gestellte Frage beim großen Vorbild stackoverflow schon beantwortet wurde. Ich bin heute aber mal mega-optimistisch und stelle hier eine Frage, auf die ich bei SO keine Antwort bekommen habe. Wer weiß, vielleicht ist ja hier ein CSS-Experte dabei...

Für das Problem, einen Container vertikal auf einer HTML-Seite zu zentrieren, aber so, dass er ganz normal von oben mit Scrollbalken gelesen werden kann, wenn das Fenster kleiner ist als die Höhe des Containers, gibt es die "Fricca-Lösung" (s. http://d-graff.de/fricca/center.html ). Die funktioniert eigentlich ganz wunderbar, auch im IE - braucht aber ein zusätzliches div im HTML-Code, das keine semantische Bedeutung hat und nur für dieses Darstellungseffekt gebraucht wird. Also würde ich das gerne eliminieren und dachte mir, das müßte doch auch mit einer CSS-:before-Anweisung gehen. Also habe ich den oben verlinkten Code leicht umgebaut. Das Ergebnis kann hier studiert werden:

http://jsfiddle.net/TrWLt/

Ich habe einfache nur den distance-Container aus dem HTML entfernt und seinen Style in einen :before-Style umgewandelt.

Ganz falsch kann der Ansatz nicht sein, denn er funktioniert wie gewünscht in FF und Chrome. Der IE hingegen zickt herum, wenn das Fenster kleiner wird als die Content-Höhe: dann schneidet er oben ab. Soweit ich die Funktionsweise der Fricca-Lösung verstanden habe, heißt das, dass der IE die float-Anweisung in diesem Fall ignoriert (aber ich könnte mich irren).

Wie kann man diesen Ansatz auch für den IE (ab Version 8, notfalls 9) zum Laufen bringen? Funktional gleichwertige Alternativen, die ebenfalls ohne das distance-div im HTML auskommen, sind natürlich auch willkommen.
News:
18.07.2012
Matthias Hlawatsch 13,2k 4 9
Hallo Matthias,
geht es Dir "nur" um das eleganter machen? Mein Tipp: lass es so wie es ist und funktioniert. Ich entwickle seit den 90er immer wieder für's Web und bisher musste man immer irgendwelche Frickellösungen basteln um maximale Kompatibilität zu erreichen.
Jaksa 18.07.2012
Hi, vor allem geht es mir ums Lernen: ist das ein IE-Bug, wo könnte der mir vielleicht sonst noch Schwierigkeiten machen - oder hab ich was falsch gemacht oder übersehen (mit :before hab ich bislang noch kaum was gemacht).
Ansonsten befasse ich mich gerade mit Stylus, und eine reine CSS-Lösung hätte den Charme, dass ich dafür eine Funktion schreiben könnte analog zu clearfix() (s. http://visionmedia.github.com/nib/).
Und schließlich: Eleganz ist ja auch was schönes, und wo wären wir, wenn nicht immer wieder jemand versuchen würde, etwas gutes noch besser zu machen?
Matthias Hlawatsch 19.07.2012
Halllo Matthias, ich hab dein Beispiel im Internet Explorer 8 getest und es funktioniert in diesem.
Kann es sein das du einen IE 5-7 zum testen verwendest? :before wird erst ab IE 8 unterstützt.
Floyd 19.07.2012
http://msdn.microsoft.com/library/cc304078.aspx
Floyd 19.07.2012
Ab IE8, ja, das weiß ich. Aber ich hab hier den IE9 unter Win7, und wenn ich das Ausgabe-Fenster bei jsfiddle vertikal verkleinere (mit dem oberen Slider), dann verschwinden Stück für Stück die oberen Zeilen. Es taucht zwar ein Scrollbalken auf, aber mit dem komme ich nicht bis ganz nach oben.
Matthias Hlawatsch 19.07.2012
Ok, konnte ich nachvollziehen, konnte aber auch keine reine CSS-Lösung finden. Tut mir leid.
Floyd 19.07.2012
Trotzdem Danke für's Ausprobieren!
Matthias Hlawatsch 19.07.2012
Nachtrag: die Release Preview vom IE10 (sowhl die Metro- als auch die Desktop-Version) macht es richtig. Spricht sehr dafür, dass IE8 und 9 da einen Bug haben, finde ich.
Matthias Hlawatsch 19.07.2012
Hi alle, zwar leider auch hier keine definitive Antwort, aber nach wenigen Tagen schon doppelt soviele Views wie die gleiche Frage bei stackoverflow nach mehreren Wochen, und immerhin einige Aktivität. Sage keiner, dass die Seite hier kein Potential hat. Dankeschön!
Matthias Hlawatsch 23.07.2012