Cross-browser spacing in Mail Marketing

Asked

Viewed 52 times

1

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

The browsers render correctly, if you notice the rounded corners on top of the boxes, which are inserted as image have a white space between them and the next Table, I would like these spaces to come out, as happens in gmail for example.

Another problem is that I can’t apply background color to Hotmail, it just won’t..

I’m testing by the: http://putsmail.com/

Follow the code I’m using, if anyone knows anything I’m doing wrong or can help me, any help would be welcome, Thank you.

<!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>
html css html5 emailing

1 answer

1

I pasted your code into the tool and saw that I missed closing one <td> on line 55.

I was gonna tell you to test these things, but I think you’ve tried:

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

But email Mkt is really boring. I usually export from the Photoshop/Fireworks schools, because even though the code is dirty, this is what the programs understand :/

  • style="display:block" in the images is indispensable.

Browser other questions tagged html css html5 emailing

You are not signed in. Login or sign up in order to post.