Strange behaviour in Safari when centering - Webmaster Forum - Web Design, Programming and SEO forums

01-30-2008, 12:56 PM

Szandor

Status: Junior Member
Join date: Jan 2008
Location: Växjö, Sweden
Expertise:
Software:

Posts: 45

iTrader: 0 / 0%

Szandor is on a distinguished road

Strange behaviour in Safari when centering

Centering content on a page has always been problem in CSS, thanks to IE. To combat the problem I've mostly used a CSS rule that places the left side of a DIV in the middle of the page, then reduced the left margin to minus half the width of the DIV. As long as you declare a position type, it works in any browser that counts. Here's an example:

Code:

body {
	position: absolute;
	left: 50%;
	margin-left: -375px;
	width: 750px; }

This is all well and good, but recently I created a site that called for content centering on the Y-axis as well as the X-axis. I followed the same principle as the first example, but along the Y-axis. Like so:

Code:

body {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -375px;
	margin-top: -375px;
	width: 750px;
	height: 750px; }

This works well in all major browsers except for Safari where the top attribute is ignored and only the bottom half of the page is visible. The X-axis centering still works perfectly.

Could it be that "top" is not valid for the BODY-tag in Safari or does Safari have some quirk that needs to be worked around? Is there another simple way to center content that does not involve a bunch of superfluous DIVs? The centering is extremely important for the layout so if there isn't, I'll resort to the extra DIVs.