views:

62

answers:

2

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?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title>Title</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  body{
    background:#000;
  }
table{
background:#ffffff;
width:50px;
border:0;
margin:0;
padding:0;  
}
</style>
</head>
<body>
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>a</td>
    </tr>
  </table>
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>b</td>
    </tr>
  </table>

</body>
</html>
A: 

Humm.. Have you updated Safari?

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

Acibi
safari 5 is a desktop browser, he's asking about iDevices (iPad/iPhone/iPod Touch).
Kris
+2  A: 

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.

Kris