Fullscreen Background + vertikal und horizontal zentrieren

[Renegade]

Erstmal Hallo an alle,

ich versuche mich zur Zeit an einem Layout was vertikal und horizontal zentriert sein soll. Das alleine ist in der Regel kein Problem, das habe ich auch schon sehr oft auf diese (2. Die sichere Zentriermethode) Art und weise umgesetzt. Dieses mal möchte ich allerdings noch einen Fullscreen Background mit einbauen, mittels Supersized - Full Screen Background/Slideshow jQuery Plugin.

Das ganze hat auch im FF soweit geklappt allerdings nicht im IE6-8. Ich habe leider keinen Einfall wo ran es liegen könnte vielleicht hat hier ja jemand einen Einfall.

Hier eine Onlinedemo

Mit freundlichen Grüßen

Renegade

Edit: Im IE8 kann man es mittels <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> lösen, bleibt also nur noch der IE6 wo er die Höhe vom content-wrapper nicht annimmt.

 

[lowsaxonian]

Moin,

auf IE7 habe ich einen FullScreenBG (vermutlich Image "Canal Park Fence") und ein "ätzend grünes" Feld "Containerinhalt". Soll es anders aussehen ?

 

[T!P-TOP]

Hm also ich habs mit IE 9, 8, 7 und 6 getestet und in allen funktioniert der Fullscreen Background!? Allerdings entsteht in jedem Browser und in jeder Browserversion ein 1px roter Border auf der linken Seite, der unterschiedlich hoch ist. In manchen Browsern länger, in manchen kürzer.

 

[Renegade]

Ja weil ich es auch schon hin bekommen habe

Fullscreen Background war jetzt auch nicht so das Problem, viel mehr die Kombination aus beidem. Da der Fullscreen Background eine fixe Positionierung braut und sich auf das Body Element bezieht. Die vertikal und horizontal zentrierung benötigt eine relative Positionierung somit hat es sich auch aufs body Element bezogen. Dem nach musste man einen div Contaner erzeugen der einen 2ten Body widerspiegelt. Das hatte ich soweit auch schon vorher hinbekommen allerings hat es im IE8 nicht geklappt und im IE6. Dem IE8 habe ich gesagt er soll den Kompatibilitätsmodus nutzen und dem IE6 musste ich dem html, body eine Höhe von 100% geben.

PS: Das ganze ist eine Demo und nicht das eigentliche Projekt, dem nach ging es nicht um die Optik.