Table Spacing

Email blast is an image sliced into sections to make links. I can't seem to get rid of the spacing between the images in the table.

You can see the email background coming around this linked button
http://friedmancreative.com/wp-content/uploads/2012/11/Screen-Shot-2012-11-14-at-9.41.05-PM.png

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Campaign Monitor Newsletter</title>
     <style>
     
     p { 
            color:#888888;
          font-size:10px;
          line-height:19px;
          font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
          margin-top:10px;
          margin-bottom:12px;
          padding-top:0;
          padding-bottom:0;
          font-weight:normal;
     }
     
     
     table {
     border-collapse: collapse;
     border-spacing: 0;
}
     </style>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#ffffff;-webkit-text-size-adjust:none;">
     

     <table bgcolor="#272727" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
     <tr>
          <td width="600" class="cell">
               <img border="0" src="images/header.png" label="Hero image" editable="true" id="screenshot"><a href="http://ev8.evenue.net/cgi-bin/ncommerce3/SEGetGroupList?linkID=img-music&groupCode=&RSRC=&RDAT=&url=http%3A//ev8.evenue.net/cgi-bin/ncommerce3/EVExecMacro?linkID=img-music&evm=main"><img src="images/buytickets.png" border="0"></a><img src="images/new-website.png" border="0"><a href="http://www.festivalboca.org"><img src="images/visit-website.png"  hspace="0" vspace="0" border="0"></a><img src="images/new-logo.png"border="0"><a href="https://www.facebook.com/FOABoca"><img src="images/facebook.jpg"  hspace="0" vspace="0" border="0"></a>
          </td>
          </tr>     
                  </table>     
          
          
   
     
                                

</body>
</html>
Stig Stig, 4 years ago

Hey Jaz,

Which email client(s) are you seeing this issue in?

In Gmail and Hotmail, you may see gaps below images which can be removed by adding display: block; to the image styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Campaign Monitor Newsletter</title>
     <style>
     
     p { 
            color:#888888;
          font-size:10px;
          line-height:19px;
          font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
          margin-top:10px;
          margin-bottom:12px;
          padding-top:0;
          padding-bottom:0;
          font-weight:normal;
     }
     
     
     table {
     border-collapse: collapse;
     border-spacing: 0;
}
     </style>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#ffffff;-webkit-text-size-adjust:none;">
     

     <table bgcolor="#272727" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
     <tr>
          <td width="600" class="cell">
               <img border="0" src="images/header.png" label="Hero image" editable="true" id="screenshot" style="display:block;"><a href="http://ev8.evenue.net/cgi-bin/ncommerce3/SEGetGroupList?linkID=img-music&groupCode=&RSRC=&RDAT=&url=http%3A//ev8.evenue.net/cgi-bin/ncommerce3/EVExecMacro?linkID=img-music&evm=main"><img src="images/buytickets.png" border="0" style="display:block;"></a><img src="images/new-website.png" border="0" style="display:block;"><a href="http://www.festivalboca.org"><img src="images/visit-website.png"  hspace="0" vspace="0" border="0"></a><img src="images/new-logo.png"border="0" style="display:block;"><a href="https://www.facebook.com/FOABoca"><img src="images/facebook.jpg"  hspace="0" vspace="0" border="0" style="display:block;"></a>
          </td>
          </tr>     
                  </table>     
          
          
   
     
                                

</body>
</html>

Could you give that a try?

You may also just add img { display: block; } to the stylesheet and have us copy it inline automatically. But in cases where you'll also use inline images, applying it to individual images might be safer.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
jaz, 4 years ago

Awesome the did the trick. Weird, I never had that problem in other platforms. Thanks!

nawarhussein, 4 years ago

very tricky.... i guess i should give a try :)


Nawar Hussein is a business owner that will do everything to satisfy his clients' needs.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098