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, 1 year 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, 1 year ago

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

nawarhussein, 1 year 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.

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account