SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1 pixel gap between DIVs in Safari but not FF

    My site has a 1 pixel gap in between DIVs which shows up in Safari (desktop and iPad), but does not show up in Firefox or Chrome. (www.ashleykirk.ca)

    It's a responsive site so I'm using percentages. When I debug it, my left main content is measured at 939 px, and the right sidebar is measured at 349 px which adds up to 1288 px. But my max-width is set to 1289 px. Not sure why that is.

    Any advice would be appreciated.

    Thanks,

    Ak

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your leftCol is 72.916666666667% of 1289 which in Chrome is rounding 939.895833333 up to 940px, however Safari seems to displaying it at it's intended value of 939px.

    Personally I wouldn't do it like this. Either have breakpoints or I like using max-widths (which is supported to IE8) or re-calculate your widths.

    1289 is an odd number, which can sometimes cause issues when trying to get a perfect balance.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the feedback. I'll have to look into this further. I followed Ethan Marcotte's method for a responsive site using very long and precise percentages.

    I do have breakpoints (using media queries). My understanding of a breakpoint is to change the layout via CSS depending on the size of the browser window. Is that what you mean?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,811
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I would never float two columns like that as it is just asking for trouble. Whenever you have to use more than 3 or 4 decimal points for a dimension you are asking a lot from browsers to get it right. Besides there's no such thing as half a pixel so browsers may round up or down to the nearest and you will be out by 1px - as in safari.

    I would just float the first column and let the second column autofill the available space.

    e.g.

    Code:
    .sidebar {
        background-color: #F0F0F0;
        float: none;
        overflow: hidden;
        width: auto;
    zoom:1.0;/* ie6/7 hack */
    }
    No gaps will be present as the remaining space space is always filled.


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
  •