Email table rendering in Windows Live Hotmail

An HTML signature is displaying incorrectly in Hotmail in Chrome / Firefox / Safari, but works fine in all of these browsers and every other client I've used so far. Images used for rounded corners appear to have some additional height added to their tables cells.

There are pretty common reports of a very similar issue which suggests using display:block for all of the images, but this doesn't seem to have fixed the issue. Here's my code:

<table id="ecxofferbox" height="90" width="525" border="0" cellspacing="0" cellpadding="0" bgcolor="#005bab" style="font-family:Verdana, Tahoma, Helvetica, sans-serif;color:#fff">
<tbody><tr valign="top">
<td width="229" height="90" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="top">
<td valign="top"><img src="http://estel.uwcs.co.uk/emailtest/circle1.png" height="6" alt=""></td>
<td></td>
</tr>
<tr valign="top">
<td width="6"></td>
<td style="padding-left:5px" width="223" height="78">
<table cellpadding="0" cellspacing="0" height="78" width="223">
<tbody><tr valign="top"><td><font color="white" size="4" face="Verdana, Tahoma, Helvetica, sans-serif"><b>Amazing offer here only £99.99</b></font></td></tr>
<tr><td></td></tr>
<tr valign="bottom"><td><a href="http://example.com" style="text-decoration:none" name="Please click here for further details" target="_blank"><font color="#ffc505" size="2" face="Verdana, Tahoma, Helvetica, sans-serif"><b>Click here for more details</b></font></a></td></tr>
</tbody></table>
</td>
</tr>
<tr height="6" valign="bottom">
<td height="6" valign="bottom"><img src="http://estel.uwcs.co.uk/emailtest/circle4.png" alt=""></td>
<td></td>
</tr>
</tbody></table>
</td>
<td width="175" height="90"><img src="http://estel.uwcs.co.uk/emailtest/example.jpg" height="90" width="175" alt=""></td>
<td width="121" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="top">
<td></td>
<td width="6" height="6" valign="top"><img src="http://estel.uwcs.co.uk/emailtest/circle2.png" height="6" alt=""></td>
</tr><tr valign="middle">
<td align="center" width="115" height="78"><img src="" alt="" height="71" width="71"></td>
<td height="78" width="6"></td>
</tr>
<tr valign="bottom">
<td></td>
<td valign="bottom" height="6"><img src="http://estel.uwcs.co.uk/emailtest/circle3.png" alt=""&g开发者_StackOverflowt;</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

Which appears correctly in IE (here in IE8) but incorrectly everywhere else I've looked (here Chrome 9 beta)

Any ideas people have would be useful. The other approaches attempted include removing all whitespace from the email and being exceptionally specific about the height and width for every td rather than assume calculation; but neither of these approaches have worked.

You need to include style="display:block;" on all of your images.

Have you tried setting background colours?

eg. bgcolor="#FFF"

If display:block; isn't doing the trick, also set margin:0; in the inline style of all the images. I've seen Gmail & Hotmail add extra vertical space on images that went away after I explicitly set all the margins to 0.