Estou desenvolvendo uma peça de E-mail Marketing e estou tendo problemas com espaçamentos de table, tr e td nos navegadores IE e com o Outlook e Outlook WebmailApp
Os navegadores renderizam corretamente, se você notar os cantos arredondas de cima dos boxes, que são inseridos como imagem ficam com um espaço em branco entre eles e a próxima Table, eu gostaria que esse espaços saíssem, como acontece no gmail por exemplo.
Outro problema é que não consigo aplicar cor de fundo no Hotmail, simplesmente não vai..
Estou testando pelo: http://putsmail.com/
Segue o código que estou usando, se alguém souber de algo que estou fazendo errado ou que possa me ajudar, qualquer ajuda seria bem vinda, Obrigado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum lorem ipsum lorem </title>
</head>
<body bgcolor="#007088" style="margin:0px; background-color:#007088; width:100%;" >
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#f5f5f5" style="border:0px solid #b59ec3;">
<tr>
<td>
<table width="100%" align="center" bgcolor="#e8e7e7"><tr><td>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border:0px solid #333;">
<tr>
<td width="180" height="20" align="left" >
<font face="Verdana, Geneva, sans-serif">
<a href="#" style="font-size:9px; color:#bbbbbb; text-decoration:none;" border="0">Lorem ipsum lorem ipsum lorem </a>
</font>
</td>
<td width="450" align="right" >
<font face="Verdana, Geneva, sans-serif" style="font-size:8.5px; color:#bbbbbb;"> Lorem Lorem Lorem
<a href="#" style="font-size:9px; color:#999999; text-decoration:none;" border="0">Lorem Lorem</a></font>
<font face="Verdana" style="font-size:8.5px; color:#bbbbbb;">| Lorem Lorem Lorem Lorem
<a href="#" style="font-size:9px; color:#999999; text-decoration:none;" border="0">Lorem Lorem</a></font>
</td>
</tr>
</table>
</td></tr></table>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#f5f5f5" >
<tr><td width="143">
<!--Logo-->
<a href="" target="_blank">
<img src="" alt="Lorem" width="143" height="53" border="0" style="display:block; background-color:#0F00f0;" title="Lorem" /></a>
</td>
<td>
<!--Menu-->
<table width="487" border="0" cellspacing="0" cellpadding="0" style="display:block">
<tr bgcolor="#f5f5f5">
<td width="65" height="36" valign="middle" style=" background-color:#bd0000;"><a href="" target="_blank"><img src="" alt="Lorem" title="Lorem" width="65" height="24" border="0" style="display:block" /></a></td>
<td width="120" height="36" valign="middle" style=" background-color:#bd0000;"><a href="" target="_blank"><img src="" alt="Lorem" title="Lorem" width="122" height="24" border="0" style="display:block" /></a></td>
<td width="95" height="36" valign="middle" style=" background-color:#bd0000;"><a href="" target="_blank"><img src="" alt="Lorem" title="Lorem" width="95" height="24" border="0" style="display:block" /></a></td>
<td width="118" height="36" valign="middle" style=" background-color:#bd0000;"><a href="" target="_blank"><img src="" alt="Lorem" title="Lorem" width="118" height="24" border="0" style="display:block" /></a></td>
<td width="87" height="36" valign="middle" style=" background-color:#bd0000;"><a href="" target="_blank"><img src="" alt="Lorem" title="Lorem" width="87" height="24" border="0" style="display:block" /></a></td>
</tr>
</table>
</tr>
</table>
</td></tr>
</table>
<table width="598" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#d5eaed">
<tr>
<td width="184" height="107" align="left"><a href="" target="_blank"><img src="" alt="Lorem" title="Lorem" width="184" height="107" border="0" /></a></td>
<td width="207" height="107" align="center"><a href="" target="_blank"><img src="" alt="Lorem" title="Lorem" width="207" height="107" border="0" /></a></td>
<td width="209" height="107" align="right"><img src="" alt="Lorem" title="Lorem" width="209" height="107" /></td>
</tr>
</table>
<!-- TABELA lado 1-->
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#d5eaed">
<tr>
<td height="5" width="590" bgcolor="#d5eaed" align="center"><img src="http://i873.photobucket.com/albums/ab298/ndezena/mktRAIA/barra-cima-grande_zps0c6011f9.jpg" width="580" height="15" style=" display:table;" /></td>
</tr>
<tr><td><TABLE width="580" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0" bordercolor="#d5eaed">
<TR>
<td width="180" height="200"><img src="" width="180" height="180" /></td>
<TD width="300"><font style="font-size:16px" face="Arial, Helvetica, sans-serif" color="#666666">
<strong><a href="" target="_blank" style="color:#454545;text-decoration:none">
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:16px; line-height:25px;">
<strong>Lorem ipsum lorem ipsum lorem</strong>
</font><br />
<font face="Arial, Helvetica, sans-serif" color="#999999" style="font-size:12px; line-height: 20px; font-weight:normal;">
Lorem ipsum lorem ipsum lorem
</font>
</a></strong>
</font><br />
<font face="Arial, Helvetica, sans-serif" color="#999999" style="width:100%; font-size:12px; ">
<font style="font-size:12px;">Lorem Lorem
<font style="font-size:12px; color:#dc002e;">R$</font>
</font>
<font style="font-size:24px; font-weight:bold; color:#dc002e;" face="Arial, Helvetica, sans-serif">
XX<sup style="font-size:12px; font-weight:bold; color:#dc002e;" face="Arial, Helvetica, sans-serif">,XX</sup>
</font></font><br />
<table align="center" height="60" ><tr><td>
<img src="" alt="Raia Arrasa!" title="Raia Arrasa!" width="53" height="27" />
<font face="Arial, Helvetica, sans-serif" color="#ed8c00" style="font-size:12px;">
Lorem ipsum
<font style="font-size:16px; "><strong>X<sup style="font-size:10px;">,XX</sup> </strong></font>
Lorem ipsum</font>
</td></tr></table>
<table align="center" height="60" width="290"><tr><td>
<a href="" target="_blank">
<img src="" alt="comprar" title="comprar" width="263" height="33" border="0" style="display:block;" /></a>
</td></tr></table>
</TD>
<td width="90">
<table align="center" border="0" width="90">
<tr >
<td border="0">
<a href="" style="text-decoration:none;" border="0">
<img src="" width="82" height="52" border="0"/>
</a>
</td>
</tr>
</table>
<br />
<table align="center">
<tr >
<td style="border:0px solid #333;" align="center">
<img src="" width="6" height="52" style="float:left;" />
<font face="Arial, Helvetica, sans-serif" color="#838383" style="font-size:8px; width:36px; height: 43px;padding-top: 7px; float:left;border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7;">
<font color="#1897a8" style="font-size:20px;">xxx </font>pontos</font>
<img src="" width="40" height="52" />
</td>
</tr>
</table>
</td>
</TR>
</TABLE>
<TABLE width="580" bgcolor="#d3ecf0" align="center" cellpadding="0" cellspacing="0" border="0" height="12" >
<TR><TD width="580"><img src="http://i873.photobucket.com/albums/ab298/ndezena/mktRAIA/barra-baixogrande_zpseed08f97.jpg" width="580" height="18" /></TD></TR>
</TABLE>
</td></tr>
<tr><td height="15" width="580"></td></tr>
<tr><td style="border:10px solid #d6e9ee;" width="280" >
<table width="280" bgcolor="#ffffff" align="left" cellpadding="0" cellspacing="0" left="0" border="0">
<tr>
<td width="280" bgcolor="#d6e9ee"><img src="http://i873.photobucket.com/albums/ab298/ndezena/mktRAIA/barra-cima1_zps14860d1c.jpg" width="280" height="15" /></td>
</tr>
<tr >
<td align="center" width="280" bgcolor="#ffffff" border="0" ><font style="font-size:14px; font-weight:bold; text-decoration:none;" face="Arial, Helvetica, sans-serif" color="#000000">
<strong>
<a href="" target="_blank" style="color:#666666; text-decoration:none">
Lorem IpsumLorem IpsumLorem Ipsum <br />
<span style="font-weight:normal;font-size:14px; color:#999999;">Lorem IpsumLorem Ipsum</span>
</a></strong></font></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td><table width="280"><tr>
<td width="170"><a href="" target="_blank"><img src="" width="180" height="180" border="0" /></a></td>
<td style="border:0px solid green;" width="115" align="center" >
<img src="" width="6" height="52" style="float:left;" />
<font face="Arial, Helvetica, sans-serif" color="#838383" style="font-size:8px; width:36px; height: 43px;padding-top: 7px; float:left;border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7;">
<font color="#1897a8" style="font-size:20px;">xxx </font>
</font>
<img src="" width="40" height="52" style="float:left;" />
<table><tr><td> </td></tr></table>
<a href="" style="text-decoration:none;">
<img src="" width="82" height="52" border="0"/>
</a></td>
</tr></table></td>
</tr>
<tr><td height="10"></td></tr>
<tr >
<td width="280" align="center">
<font face="Arial, Helvetica, sans-serif" color="#999999" style=" width:100%; font-size:13px; ">
Ips um <strong>XX<sup style="font-size:8px;">,XX</sup></strong> por
<font style="font-size:12px;">Ipsum
<font style="font-size:12px; color:#dc002e;">R$</font>
</font>
<font style="font-size:24px; font-weight:bold; color:#dc002e;" face="Arial, Helvetica, sans-serif">
XX<sup style="font-size:12px; font-weight:bold; color:#dc002e;" face="Arial, Helvetica, sans-serif">,xx</sup>
</font>
</font>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td width="275" align="center">
<a href="" target="_blank">
<img src="" alt="comprar" title="comprar" width="263" height="33" border="0" style="display:block;" /></a>
</td>
</tr>
<tr><td width="280" bgcolor="#d6e9ee">
<img src="http://i873.photobucket.com/albums/ab298/ndezena/mktRAIA/barra-baixo1_zpse6fe648e.jpg" width="280" height="15" />
</td></tr>
</table>
<table width="280" bgcolor="#ffffff" align="right" cellpadding="0" cellspacing="0" left="0" border="0">
<tr>
<td width="280" bgcolor="#d6e9ee"><img src="http://i873.photobucket.com/albums/ab298/ndezena/mktRAIA/barra-cima1_zps14860d1c.jpg" width="280" height="15" /></td>
</tr>
<tr >
<td align="center" width="280" bgcolor="#ffffff" border="0" >
<font style="font-size:14px; font-weight:bold; text-decoration:none;" face="Arial, Helvetica, sans-serif" color="#000000">
<strong><a href="" target="_blank" style="color:#666666; text-decoration:none">
Lorem2 Ipsum2 Lorem2 Ipsum2 Ipsum2 <br />
<span style="font-weight:normal;font-size:14px; color:#999999;">Lorem2 Ipsum2 Ipsum2 </span>
</a></strong></font></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td><table width="280">
<tr>
<td width="170"><a href="" target="_blank"><img src="" width="180" height="180" border="0" /></a></td>
<td width="105" align="center">
<img src="" width="6" height="52" style="float:left;" />
<font face="Arial, Helvetica, sans-serif" color="#838383" style="font-size:8px; width:36px; height: 43px;padding-top: 7px; float:left;border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7;">
<font color="#1897a8" style="font-size:20px;">xxx </font>
</font>
<img src="" width="40" height="52" style="float:left;" />
<table><tr><td> </td></tr></table>
<a href="" style="text-decoration:none;">
<img src="" width="82" height="52" border="0"/>
</a></td>
</tr>
</table>
</td>
</tr>
<tr><td height="10"></td></tr>
<tr >
<td width="280" align="center">
<font face="Arial, Helvetica, sans-serif" color="#999999" style=" width:100%; font-size:13px; ">
Lo rem<strong>XX<sup style="font-size:8px;">,xx</sup></strong> por
<font style="font-size:12px;">Ipsum
<font style="font-size:12px; color:#dc002e;">Lo</font>
</font>
<font style="font-size:24px; font-weight:bold; color:#dc002e;" face="Arial, Helvetica, sans-serif">
XX<sup style="font-size:12px; font-weight:bold; color:#dc002e;" face="Arial, Helvetica, sans-serif">,xx</sup>
</font>
</font>
</td>
</tr>
<tr><td height="10"></td></tr>
<tr><td width="275" align="center"><a href="" target="_blank"><img src="" alt="comprar" title="comprar" width="263" height="33" border="0" style="display:block;" /></a></td>
</tr>
<tr><td width="280" bgcolor="#d6e9ee"><img src="http://i873.photobucket.com/albums/ab298/ndezena/mktRAIA/barra-baixo1_zpse6fe648e.jpg" width="280" height="15" /></td></tr>
</table>
</td></tr>
</table>
</body>