Spacing Cross-browser in Mail Marketing

Navigation
1

I am developing a piece of Email Marketing and am having problems with table, tr and td spacing in IE browsers and with Outlook and Outlook WebmailApp

Browsers render correctly, if you notice the rounded corners of the pits, which are inserted as an image with a blank space between them and the next Table, I would like these spaces to leave, as in gmail for example .

Another problem is that I can not apply background color in Hotmail, it just will not ..

I'm testing it: link

Follow the code I'm using, if anyone knows of something I'm doing wrong or can help me, any help would be welcome, thanks. 

<!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>&nbsp; </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>&nbsp; </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>
    
asked by anonymous 28.07.2014 / 15:04

1 answer

1

I pasted your code into the tool and saw that it failed to close a <td> on line 55.

I was going to tell you to test these things, but I think you've already tried:

  • put style="display:block" in images.
  • put the background color in the <td> and the table inside, to see if it catches.

But doing email mkt is really chatinho. I usually export from Photoshop / Fireworks slices anyway, because although the code is dirty, this is what programs understand: /

    
17.08.2014 / 18:25
Align rowEdit and other buttons on the same row in PrimeFaces Check variation of words in a sentence with RegExp