Inconsistent spaces below TD elements in tables in HTML email in Outlook (2007 and 2010)

Question

I've researched this problem, finding many suggested fixes on the web, but nothing is working.

The problem is the gap between a specific TD element in a table in an HTML email I'm designing. It's displaying this way only in Outlook 2007 and 2010.

Here is a link to a screen grab of the problem

In the sidebar on the right, there should be no gap between "Level 2" and the thin rounded corner box above it.

Here is the code for the nested table that creates the blue box:

<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table>

As you can see, I've removed all white space as this was suggested in one of the work-arounds I found. I've also inserted the 'line-height:0;font-size:0' style in the TD element and the 'display:block' style in the image itself, again all suggested work-arounds. None of these has made the slightest difference.

This problem does not appear in any other email client or browser.

Please help!

Answer 1

Using tables is standard practice in html email builds because css support is poor in email clients, particularly Outlook.

Keep your table structure but try these additions:

• Add valign="bottom" to the td cell containing box_dark_top.gif and valign="top" to the next two cells
• For each image, set the css as style="display:block;margin:0;padding:0"

• Use inline css rather than internal

  <table class="box" width="200" border="0" cellspacing="0" cellpadding="0">
  <tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr>
  <tr>
      <td valign="top" class="box_dark">
          <h2>Level 2<br /><span class="white">Care Assistants</span></h2>
          <h2>Level 3<br /><span class="white">Senior Carers</span></h2>
          <h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2>
      </td>
  </tr>
  <tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table>
  

Answer 2

Outlook 2007 onward uses Word to render HTML. Here's an article about this, with links to more strongly-opinionated articles and websites.

Maybe you could try designing your message in Word (or Outlook itself)? Of course then it may not render properly in a sane email client.

Answer 3

Set the height of the TD as well as any other TD that should have a fixed height:

<td valign="bottom" height="10" width="200">

*You should also be using width on ALL TD's in email.

Answer 4

I've found out that Outlook is wrapping img tags with and styling a margin-top whenever they "feel" like it. You can check the html generated by saving the email as html.