I am having a bit of trouble with a gap that appears only in IE (any version) and Yahoo Mail. I trying to create an email template with tables (with one nested table). As you can see in the image, there is a gap at the top and bottom of a TD that houses the header. If I try and view the HTML locally, I don’t see the problem in IE so it’s when it’s inn Yahoo Mail that the issue is present. Other mail clients is fine.
Any help would be great.
Thanks
Screenshot of issue:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Email Template</title>
<style type="text/css">
body {
padding:0;
margin:0;
}
table {
margin:15px auto 50px auto;
}
td hr {
padding:0;
margin:10px;
background-color:rgb(0,13,221);
height:1px;
border:0;
}
td {
font-size:12px;
}
td p {
padding-top:7px;
}
td p a {
color:rgb(0,134,195);
}
td strong {
font-size:13px;
font-weight:900;
color:rgb(0,0,0);
}
.address {
margin-top:50px !important; !important;
font-size:11px;
color:rgb(79,83,87);
}
</style>
</head>
<body>
<table width="690" cellpadding="0" cellspacing="0" border="0" align="center" style="font-family:Arial, sans-serif">
<tr>
<td rowspan="5" width="20" valign="top">
<img src="#" width="25" height="538" style="background-color:blue;display:block" />
</td>
<td width="650">
<table width="650" border="0" cellpadding="0" cellspacing="0" style="margin:0">
<tbody>
<tr>
<td width="650" height="19" colspan="3" style="background-color:rgb(10,14,43)"></td>
</tr>
<tr style="background-color:rgb(10,13,44)">
<td height="1" width="3%"></td>
<td rowspan="49" width="7%">
<img src="#" width="192" height="72" style="background-color:blue;display:block" />
</td>
<td width="90%"></td>
</tr>
<tr style="background-color:rgb(12,15,46)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,16,47)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,15,46)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,16,47)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,47)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,49)">
<td height="5"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,18,50)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,49)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,18,50)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,18,50)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,19,52)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,20,53)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,21,54)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,20,53)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,21,54)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,22,55)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,23,55)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,22,54)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,23,58)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,21,57)">
<td height="4"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,22,57)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,23,58)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,24,59)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,24,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,24,59)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,26,61)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,25,63)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,26,64)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,26,63)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,64)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(15,27,67)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,28,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,29,69)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,30,70)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,29,70)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,30,72)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,29,72)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,30,73)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,32,75)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,31,74)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(9,32,74)">
<td height="1"></td>
<td></td>
</tr>
<tr>
<td width="650" height="2" colspan="3" style="background-color:rgb(10,31,74)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(11,32,77)"></td>
</tr>
<tr>
<td width="650" height="2" colspan="3" style="background-color:rgb(11,34,78)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(13,34,79)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(12,35,79)"></td>
</tr>
</tbody>
</table>
</td>
<td rowspan="5" width="20" valign="top"><img src="#" width="25" height="538" style="background-color:blue;display:block" /></td>
</tr>
<tr>
<td width="650" valign="top">
<img src="#" width="650" height="10" style="background-color:blue;display:block" />
</td>
</tr>
<tr>
<td style="padding:0 10px 0 10px">
<p><strong>Headline</strong></p>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3 <a href="#"> Link</a></p>
<p>Text Line 4</p>
<p></p>
<hr />
<p>Text Line 5</p>
<p style="margin-top:80px;font-size:11px;color:rgb(65,65,65);" class="address">Text Line 6</p>
</td>
</tr>
<tr>
<td align="center"><img src="#" width="626" height="68" style="background-color:blue;display:block" /></td>
</tr>
<tr>
<td align="right"><p>Text Line 7<a href="#">Link</a></p></td>
</tr>
</table>
</body>
I didn’t test the email in any email clients BUT, i did find the problem occurring in firefox. Using firebug i corrected the problem by adding vertical-align:top on line 20 (the td style)
Just be aware that you may need to use inline styles as some email clients strip out stylesheets whether in the head or body of the document.
Here is a working version: http://jsfiddle.net/ypzA2/