SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 floating columns pushed to the left in Safari

    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:

    Code css:
    /* 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!

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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).

  3. #3
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    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

  4. #4
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there really no-one who can help me?

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Is there really no-one who can help me?
    I'll save you!

    An IE5 fix seems to make Safari(for pc) happy
    Code:
    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.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I'll save you!

    An IE5 fix seems to make Safari(for pc) happy
    Code:
    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!


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
  •