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?
