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

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

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.

Answer 3

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 4

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.