You Know

CSS ist toll. Zumindest so lange, bis man irgendetwas browserübergreifend vertikal zentrieren muss. Da im Moment Ferien sind und ich es für ein Projekt brauche, habe ich mich einmal diesem Problem angenommen.

Nach kurzer Suche stößt man auf viele interessante Beiträge. Mein Ziel war eine valide Lösung, die im Opera, Firefox und Internet Explorer (Version 6 +7) funktioniert. Besonders hebt sich dabei Yuhus Lösung hervor: In Browsern, die display: table-cell verstehen, wird aus den divs eine “Tabelle” gebaut, sodass man vertical-align: middle nutzen kann. Für den Internet Explorer nutzt man einen Kniff mit top.

Die Lösung tut auch einwandfrei - bis man zum IE7 kommt. Dieser versteht dummerweiße den verwendeten Hack (#inner[id]) falsch und wendet das Stylesheet an - somit ist der div in allen Browser zentriert, nur nicht im IE7.

Doch es gibt einen Hack, der den IE in allen Versionen davon abhält, eine CSS-Anweisung anzuwenden:

html>/**/ body #inner {
/* Anweisungen hier */
}

Wunderbar - das ist die Lösung! Somit sieht das verbesserte, valide Hack-CSS so aus:

#outer {height: 400px; overflow: hidden; position: relative;}
html>/**/ body #outer {display: table; position: static;}
 
#middle {position: absolute; top: 50%;} /* for explorer only*/
html>/**/ body #middle {display: table-cell; vertical-align: middle; position: static;}
 
html>/**/ body #inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner {position: static;} */

Ich hoffe, es hilft.

In eigener Sache: Dies ist gleichzeitig ein Test des SyntaxHighlighterWP-Syntax-Plugins… Hoffentlich geht es

Update: Oh, Hab doch tatsächlich ein html>/**/ body vergessen, ist jetzt ergänzt.

Den CSS Zen Garden kennt man. Es geht darum, für eine unveränderliche HTML-Seite ganz unterschiedliche Layouts mithilfe von CSS zu basteln. Etwas ähnliches gibt es jetzt auch auf Deutsch: Die CSS-Trickkiste. Alle Layouts stehen bis jetzt sogar unter der GNU GPL, somit kann man sie einfach selbst weiterverarbeiten. Auch zum Lernen von CSS kann das Herumstöbern in fremden Stylesheets nie ein Fehler sein. Habe ich genauso gemacht.