SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered in all browsers except Safari

    I have all elements of my page all wrapped in this div:
    Code:
     #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?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,540
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    I suggest posting a link to the active code so we can see the "bigger picture" . You know how little information isolated snippits convey

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    I suggest posting a link to the active code so we can see the "bigger picture" . You know how little information isolated snippits convey
    There's no reason to post a link.
    There's nothing else there.
    I've removed all elements except this:

    Code:
    <div id="column-wideNEW">
    </div>
    Added a border to it in css like this:

    Code:
     #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.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,540
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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>.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •