Centered in all browsers except Safari

I have all elements of my page all wrapped in this div:

 #column-wideNEW {
   width: 925px;
   height: 1320px;
   margin: 0 auto;
  }

It looks good and centered in all browsers, except safari(via iphone) it is flush left.

Any suggestions?

I suggest posting a link to the active code so we can see the “bigger picture” :slight_smile: . You know how little information isolated snippits convey :slight_smile:

There’s no reason to post a link.
There’s nothing else there.
I’ve removed all elements except this:

<div id="column-wideNEW">
</div>

Added a border to it in css like this:

 #column-wideNEW {
  border:1px solid #000000;
   width: 925px;
   height: 1320px;
   margin: 0 auto;
  }

Also, tried:
margin: 0px auto;

Clear all cache and history, powerd down my iphone and powered it back up,
yet it still shows flush left in Safari.

Any suggestions would be appreciated.

If there is not doctype, then maybe Safari is in quirks mode.

We need to see a working page that demonstrates the issue… starts with <!doctype> and ends with </html>.

Clear all cache and history, powerd down my iphone and powered it back up,
yet it still shows flush left in Safari.

it looks like the page is wider than your iphone, thus it would appear as if it rendered flush left. to test this change the width, temporarily, to something like 80%.

Speaking of container dimensions. Setting a height is a really bad idea ( I realize you may just be doing it for visualization purposes) But I just thought I would chime in on that, just in case.

Hi,

Assuming you have no media queries or viewport meta tag then how do you expect a 925px width page to look on a 320px width device :slight_smile:

The iphone will scale the actual site down to fit the width of the viewport so that your 925px fits within the iphone’s viewport. It cannot possibly be centred unless you have fixed side margins or a percentage width as Dresden mentions above. Centering the site within a 320px width device would make it incredibly small unless you just wanted some breathing space around the edge.

For proper mobile usage you should really be using media queries and the viewport meta tag to give a better (non-scaled down) view of your site.