1 pixel gap between DIVs in Safari but not FF

HTML & CSS
1

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

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

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

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.


.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.