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:
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.
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.
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?
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.
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.
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.
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!
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.