I've found a strange problem with Internet Explorer related to table spacing and cannot find a way to work around it. An empty table results in a single pixel white space with Internet Explorer (6 and 7, 8 not yet tested), while all other browsers ignore the empty table. Here's a picture of the problem:
And here is the minimum
HTML code to reproduce the issue (please note that there are more margin/padding css attributes and table attributes specified than really needed, I just tested if this fixes IE's behavior):
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div style="width: 200px; border: 1px black solid">
<table border="0" cellspacing="0" cellpadding="0"
style="margin: 0pt; padding: 0pt; border-collapse: collapse;">
<tr>
<td style="padding: 0; margin: 0">
</td>
</tr>
</table>
<div style="background: red">
Test
</div>
</div>
</body>
</html>
I'm not using an empty table as specified in the example above, but this was the minimum code that displays this behavior. Any ideas on how to fix this and remove the white space with IE?
