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.