Take the 2-minute tour ×

The following markup when viewed in Safari on Iphone and Ipad displays the body background color for 1 pixel between the two tables. What is this and how do I stop it?

  <style type="text/css">

share|improve this question
for future reference: make it easy for people to see what happens by providing code and link, I've done the link part so I can now check on my iPhone. theredhead.nl/~kris/stackoverflow/3037865.html –  Kris Jun 14 '10 at 17:02

2 Answers 2

up vote 2 down vote accepted

I've taken the liberty of dumping your markup to a file on my server:

There is no actual gap on my iPhone, but... the resizing algorithm does leave some space between the tables from time to time while zooming in/out.

This almost certainly has to do with some math not perfectly aligning to the pixel and getting rounded to match the nearest horizontal line. There is not much you can realy do about this, unless you resort to surrounding the tables with an inline-block that has the same background-color set like in the alternate file linked above.

On my iPhone the alternate version never displays any black lines between the tables. Be aware though that now the next element will be next to the inline-blocked div instead of underneath the tables. I'll leave solving that upto the reader. hint: css clear attribute.

share|improve this answer

Humm.. Have you updated Safari?

On Safari 5 I have no issue with this html...

share|improve this answer
safari 5 is a desktop browser, he's asking about iDevices (iPad/iPhone/iPod Touch). –  Kris Jun 14 '10 at 17:35

Your Answer


