How to lock a variety of images together in HTML so that they appear as one image (no CSS)

Question

I'm doing up a newsletter for my non-profit organization and I'm trying to code a new banner in place. I can't use an image map because that won't render properly in many email clients, so I've had to chop up the image and hyperlink the various sections. I also don't believe I can use CSS since this is being distributed as an email (though I'm open to using inline style if it will work with email clients).

The problem I'm encountering is that many email clients seem to place a gap of several pixels between the top image and the 8 chopped up images on the next row when they should be rendering flush, with a 0 pixel gap. Is there any way I can group these images together so that they always render together as one image?

Here is my code:

<!-- END MessageViewer link --><!-- BEGIN banner and buttons -->
<tr>
<td style="border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; border-right: #ffffff 1px solid;" valign="top">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" />
<br />
<a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" /></a><a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" /></a><a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" /></a><a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" /></a><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" /><a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" /></a><a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" /></a><a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" /></a>
</td>
</tr>
<!-- END banner and buttons --><!-- BEGIN main content area -->

Answer 1

From my experience, image maps seem to work fine. Note: See comments below regarding image maps.

If you want to break the images up though, here is the way. Note each image is in it's own table cell and has some inline css, most importantly display:block;.

<!-- END MessageViewer link -->
<!-- BEGIN banner and buttons -->

<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td colspan="8">
    <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" style="margin: 0; border: 0; padding: 0; display: block;" />
  </td>
</tr>
<tr>
  <td width="77">
    <a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self">
      <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
  </td>
  <td width="43">
    <a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self">
      <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
  </td>
  <td width="99">
    <a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self">
      <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
  </td>
  <td width="144">
    <a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank">
      <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
  </td>
  <td width="143">
    <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" style="margin: 0; border: 0; padding: 0; display: block;" />
  </td>
  <td width="30">
    <a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank">
      <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
  </td>
  <td width="29">
    <a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank">
      <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
  </td>
  <td width="35">
    <a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank">
      <img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
  </td>
</tr>
</table>
<!-- END banner and buttons -->
<!-- BEGIN main content area -->

Also, put this in your email head:

  <style type="text/css">           
    /* Client-specific Styles  */
    #outlook a {padding:0;}
    table td {border-collapse: collapse;}
  </style>

Just note that with the 'many images' technique, when someone forwards your email out of Outlook, there is an unavoidable gap created between the rows. It is better to avoid horizontally splitted images because of this.

Answer 2

Here is the solution: http://jsfiddle.net/TgTJ6/

   <table width="600" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td colspan="8"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" /></td>
 </tr>
 <tr>
   <td><a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" /></a></td>
   <td><a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" /></a></td>
   <td><a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" /></a></td>
   <td><a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" /></a></td>
   <td><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" /></td>
   <td><a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" /></a></td>
   <td><a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" /></a></td>
   <td><a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" /></a></td>
 </tr>

I just made some <tr> and <td>'s, a colspan="8" and display:block on all of the images. This is the way to do it. Dont use <br> between images, some email clients just removes them, when theres no text nearby

Answer 3

Try making the new row a new row by replacing <br> with </td></tr><tr><td>. And set cellpadding="0" and cellspacing="0" inside the <table>. Besides that, you may want to use an email code validator like Mally or emailonacid (look for email optimizer).

Answer 4

The <br> is probably creating the gap.

Set the width of the TD to match the width of the banner image, and remove the <br>. This will force the next line to wrap automatically.

You can use CSS, but it needs to be inline.

For more complete info, see Campaign Manager CSS Guide.