3 floating columns pushed to the left in Safari

[Ize]

Hi,

I'm working on a website, in which I have 3 floating columns. These columns are ordered different visually than in the source code. (content first)

The containing div surrounding the columns is centered in the viewport, but not in Safari. I don't know a lot about Safari bugs (and maybe the problem is just me), so if anyone could give me some pointers, that would be great.

Check out http://www.whatstyle.net/bla/n8/home.html for the design. The CSS can be found here.
The code that controls the layout's this:

/* Layout
-----------------------------------------------------------------------------*/
 
#content {
	width: 960px;
	min-height: 800px;
	margin: 42px auto 0;
	padding: 16px 0;
	background: #000;
	color: #FFF;
}
 
#main-content {
	position: relative;
	float: left;
	width: 420px;
	margin-left: 250px;
	padding: 16px 20px 0;
	background: #FFF;
	color: #000;
}
 
#huge-content {
	position: relative;
	width: 700px;
	margin-left: 250px;
	padding: 0 10px 0 0;
	float: left;
	color: #00ADEE;
}
 
#secondary-content {
	float: left;
	width: 230px;
	padding: 16px 10px;
}
 
#global-content {
	float: left;
	width: 230px;
	margin-left: -960px;
	padding: 16px 10px;
}
 
#main-content.swf {
	width: 460px;
	padding-left: 0;
	padding-right: 0;
	background-color: #000;
	color: #FFF;
}

Thanks in advance!

[samanime]

Hmmm, maybe it has an issue with using the 3 value form of margin. I've personally never seen or used that form before, so I don't know much about it, but maybe Safari doesn't like it. Try either breaking that into margin-left, -right, -top, or using the 4 value form (top right bottom left).

[Ize]

Hmmm, maybe it has an issue with using the 3 value form of margin. I've personally never seen or used that form before, so I don't know much about it, but maybe Safari doesn't like it. Try either breaking that into margin-left, -right, -top, or using the 4 value form (top right bottom left).

Nah, that's not it. Lookit: http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin

[Ize]

Is there really no-one who can help me?

[markbrown4]

Is there really no-one who can help me?

I'll save you!

An IE5 fix seems to make Safari(for pc) happy

body {
    background: #000 url(images/bg.jpg) no-repeat center top;
    text-align: center;
}
#content { text-align: left }

I haven't seen this before in Safari, Perhaps it's a bug in the pc version, or there could be something else in your page that is causing the bug. I can't spot it now.

[DaveWoods]

I haven't seen this either. I wonder whether it's something to do with the way the position: relative; is used on the child of the content making safari behave oddly?

I'd usually apply center on the body itself and then float a container within this or use the overflow: hidden; method way of forcing the parent to expand with the children.

Not seen this issue before though so only guessing at this stage.

[Ize]

I'll save you!

An IE5 fix seems to make Safari(for pc) happy

body {
    background: #000 url(images/bg.jpg) no-repeat center top;
    text-align: center;
}
#content { text-align: left }

I haven't seen this before in Safari, Perhaps it's a bug in the pc version, or there could be something else in your page that is causing the bug. I can't spot it now.

Now I've seen it all.
Your code also fixes Safari on Mac. I would never have thought that would work. Thanks very much!