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.

01-30-2008, 05:03 PM

jabberwocky

Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:

Posts: 278

iTrader: 0 / 0%

jabberwocky is on a distinguished road

I use;

Code:

#site { 
margin: 25px auto; 
width:760px; 
min-height:750px; 
height:auto !important; 
height:750px;  }

So the #site is the main wrap that contains all of your site which puts some room on the top and bottom of it. The width has to be defined for this to work I believe. This works in FF, Safari (version?), Opera (version?), IE 6, 7, but NOT 5.1 or 5.5 (you could just use a conditional statement really for that).

Anyways, I'd give that a go.

01-31-2008, 10:24 AM

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

This is truly fascinating. I worked on another problem and somehow solved this one. I say somehow because I did change the CSS around a bit and I can't really say what change that solved it, although it is probably the removal of the background image in the BODY. Here's the story.

The website menu will be JavaScript driven and when you click the appripriate link the old DIV will slide out and the new DIV will slide in to replace it. In order for this to work, the other DIV was placed outside of the screen. Since the BODY had "overflow: hidden", no scrollbars were visible and my right-aligned background showed up in the upper right corner. With the exception, naturally, of IE (6 and 7, didn't try 5.x) where it didn't seem to show up at all. Setting overflow to "auto" revealed the background way out by the hidden DIV where it probably sat all along in IE.

I guess I could have pinned the image down with "fixed", but I needed to rework some of the XHTML anyway so I removed the image from the BODY and added it to my header DIV instead and placed it where I wanted it. When I looked at the result in varous browsers, the Safari problem was gone.

Curious and annoying.