Question

I have 3 divs with backgrounds. IOS seams to add a white line between them on all formats from iPhone to iPAD. Originally I thought this was a problem with tables but it applies to divs too.

#cbtop {
    height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmain.png) center top repeat-y;
}
#cbbottom {
    height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmain.png) center bottom repeat-y;
}
#content {
    min-height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmains.png) center top repeat-y;
}

seen here on iOS only – http://www.golfbrowser.com/courses/wentworth-east/

Any ideas?

Marvellous

Answer 1

That white line is actually the two divs overlapping. This is a precision problem on iOS’s safari, and is pretty much unavoidable (imho). The problem is most prominent when zooming in, as this is when the lack of precision occurs.

You MAY be able to “trick” the browser into working correctly by using a half-pixel top-margin on the bottom div… I have no way of testing this, however.

In this instance, I would use css border radius to accomplish the same effect… although it will not display properly in all browsers, you may still find it an acceptable solution

#cb
{
    background: rgb(255,255,255); // fallback for browsers without alpha support
    background: rgba(255,255,255, 0.5);

    border-radius: 30px;
}

There are also webkit and mozilla versions of the border radius property… this will help with cross-platform compatability.

See more on background alpha transparency here: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

See JS Fiddle: http://jsfiddle.net/xixionia/4SYP4/