Layout differences between Outlook 2003 and Outlook 2007

Hi, I have been working on developing a template that will work across all e-mail clients or as close as possible. A few pixels here and there should be acceptable. But having achieved a perfect display in Outlook 2007 and most other clients using 18px spacer images instead of padding or td widths, the display is off in Outlook 2000 and 2003. The widths of some tables are off in these clients. Would somebody have an idea on a solution, or if this presents the best way to achieve correct display across the e-mail clients.

Many thanks,
Kevin

Code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- CSS -->
<style type="text/css">
a { text-decoration:none; color:#666;}
a:hover { text-decoration: underline !important; }
.bullet-list {font-family: Arial, Helvetica, sans-serif; margin:0; padding:0; font-weight:bold; color:#ccc;}
.bullet-list li { margin:10px 0 0 25px; padding:0 10px 5px 0;}
.bullet-list .first {padding-top:10px;}
</style>
<!-- End CSS -->

</head>

<body style="margin: 0px; background-color: #F2F1F2;">

<table border="0" cellspacing="0" cellpadding="0" width="560" align="center" bgcolor="#FFFFFF">
    <tr>
        <td colspan="5"><img src="images/banner.jpg" width="560" height="338" alt="" border="0" /></td>
      </tr>

</table>


<table border="0" cellspacing="0" cellpadding="0" width="560" align="center" bgcolor="#FFFFFF">
 
  <tr>
    <td width="18"><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td width="154" rowspan="2" valign="top"><p style="font-size: 13px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;"><strong>At home as Gaeilge</strong></p><p style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #6BADDD; margin: 0px;">Click here to read this issue in Irish</p></td>
    <td width="10">&nbsp;</td>
    <td width="360"><p style="font-size: 18px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #601558; margin: 0px;"><strong>Welcome to at Home</strong></p></td>
    <td width="18"><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td rowspan="2"><p style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;">In your latest At home issue you'll have the chance to pick up a freebie with our great <strong>Book Club competition</strong>. You'll also find some handy lighting tips, which our Home Team have been busy devising. And as an added bonus, we have a great offer from our <strong>online shop</strong> along with the chance to<strong> win 1 of 10 iPhones</strong> when you sign up for <strong>Direct Debit.</strong></p></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><p style="font-size: 13px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;"><strong>At home Interactive</strong></p>
    <p style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #6BADDD; margin: 0px;">Click here to read this issue in Irish</p>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top"><p style="font-size: 13px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;">&nbsp;</p></td>
    <td>&nbsp;</td>
    <td><p style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;">&nbsp;</p></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><p style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #6BADDD; margin: 0px;">&nbsp;</p></td>
    <td>&nbsp;</td>
    <td><span style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;">If you have any questions you would like to ask, just drop us an e-mail to <a href="mailto:athome@bordgaisenergy.ie"><strong>athome@bordgaisenergy.ie</strong></a>. We're always glad to hear from you and are delighted to help in any way we can!</span></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="3"><img src="images/ahe_line.jpg" width="525" height="1" alt="" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="560" align="center" bgcolor="#FFFFFF">
  <tr>
    <td width="18"><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td width="180" rowspan="3" valign="top"><img src="images/img_light.jpg" width="180" height="250" alt="" /></td>
    <td width="18"><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td width="326" valign="top"><p style="font-size: 18px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #005D31; margin: 0px; padding:0 0 10px 0;"><strong>Light up on those wintry days</strong></p></td>
    <td width="18"><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="top"><p style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;">Our Home Team have been doing their homework so we can help you lighten the load without leaving you in the dark. These simple lighting steps can be applied straight away to start saving on your electricity costs.</p>
            <ul class="bullet-list">
                    <li style="font-size: 12px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; color: #666;">When leaving a room, simply switch off the lights.</li>
                    <li style="font-size: 12px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; color: #666;">Where possible, replace ordinary light bulbs with Compact Fluorescent Lamps (CFLs).</li>
                    <li style="font-size: 12px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; color: #666;">Focus on directing light where you need it by placing lamps in various corners.</li>
                    <li style="font-size: 12px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; color: #666;">Install motion sensors and timers for outside lights to cut costs and increase security.</li>
            </ul>
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><a href="#"><img src="images/btn_green.gif" width="113" height="24" alt="" align="right" border="none" /></a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="3"><img src="images/ahe_line.jpg" width="525" height="1" alt="" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td>&nbsp;</td>
    <td><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td>&nbsp;</td>
    <td><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="560" align="center" bgcolor="#FFFFFF">
  <tr>
    <td width="18"><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td width="254" valign="top"><p style="font-size: 18px; line-height: 20px; font-family: Arial, Helvetica, sans-serif; color: #722456; margin: 0px; padding:0 0 10px 0;"><strong>Helping you stay in control with Direct Debit</strong></p></td>
    <td width="18"><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td width="253" valign="top"><p style="font-size: 18px; line-height: 20px; font-family: Arial, Helvetica, sans-serif; color: #63448A; margin: 0px; padding:0 0 10px 0;"><strong>Shop online for great savings</strong></p></td>
    <td width="18"><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td width="254" valign="top">
    <img src="images/img_debit.jpg" width="150" height="122" alt="Image of a pair of glasses and a twenty euro note" align="right" style="display:block;" />
    <p style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;">We like to make it as easy as possible for our customers to manage their account and pay their bills. It's why our Direct Debit service is all about convenience and minimum hassle.</p></td>
    <td>&nbsp;</td>
    <td valign="top">
    <img src="images/img_shop.jpg" width="109" height="158" alt="Shopping bag" style="display:block; padding-left:10px;" align="right" />
    <p style="font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;">This month you can avail of a 15% reduction on charming bedside lamps for children from the Bord G&aacute;is Energy Online Shop.</p></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td width="254" valign="top">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a href="#"><img src="images/btn_purple.gif" width="113" height="24" alt="" border="none" /></a></td>
    <td>&nbsp;</td>
    <td><a href="#"><img src="images/btn_green.gif" width="113" height="24" alt="" align="right" border="none" /></a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="3"><img src="images/ahe_line.jpg" width="525" height="1" alt="" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td>&nbsp;</td>
    <td><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
    <td>&nbsp;</td>
    <td><img src="images/spacer.gif" width="18" height="1" alt="" border="0" /></td>
  </tr>
</table>

<!-- Footer Content -->
    <table width="560" border="0" align="center" cellpadding="20" cellspacing="0" bgcolor="#CCCCCC">
          <tr>
              <td height="20" width="270"><p style="font-size: 12px; line-height: 24px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;">To unsubscribe, simply <unsubscribe>click here</unsubscribe></p></td>
              <td height="20" align="right" width="270"><p style="font-size: 12px; line-height: 24px; font-family: Arial, Helvetica, sans-serif; color: #666; margin: 0px;"><a href="http://www.bordgaisenergy.ie" target="_blank">www.bordgaisenergy.ie</a></p></td>
          </tr>
    </table>
    <!-- Close Footer Content -->

</body>
</html>

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