Outlook messing with my column spacing!

My email looks fine in just about every email client, but there is an issue with Outlook 07 where the text table widths change ...

<!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>Lease Crutcher Lewis</title>

<style media="all" type="text/css">
table img { display:block; }

<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #ffffff;
}
.style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #005195;
}
.style3 {font-size: 12px; color: #006aa9; font-family: Verdana, Arial, Helvetica, sans-serif;}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; color: #666666; }
.style5 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #005195;
}
.style6 {color: #005195}
.style8 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 110%;
    color: #777777;
}
body,td,th {
    color: #777777;
}
a:link {
    color: #777777;
}
a:visited {
    color: #777777;
}
a:hover {
    color: #777777;
}
a:active {
    color: #777777;
}
-->
</style></head>

<body>
<div align="center">
  <span class="style8"><br />
Having trouble viewing this email?
<webversion> click here </webversion>
<br />
<br />
  </span>
  <table width="623" border="0" cellpadding="0" cellspacing="0"><tr align="left" valign="top"><td width="623" height="100" bgcolor="#FFFFFF"><table width="623" border="0" cellpadding="0" cellspacing="0">
    <tr align="left" valign="top">
      <td width="623" height="73" bgcolor="#FFFFFF"><img src="img/Lewis_top.jpg" width="623" height="73" /></td>
    </tr>
    <tr align="left" valign="top">
      <td width="623" height="382" bgcolor="#FFFFFF"><div align="center"><a href="http://www.lewisbuilds.com/"><img src="img/Lewis_2.jpg" alt="Lease Crutcher Lewis" width="623" height="382" border="0" /></a></div></td>
    </tr>
    <tr bgcolor="#BBBBBB">
      <td height="179" bgcolor="#ffffff"><table width="623" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr align="center" valign="top">
            <td width="40" height="179" bgcolor="#FFFFFF"><img src="img/line_left.jpg" width="40" height="179" /></td>
            <td width="284" height="179" bgcolor="#FFFFFF"><p align="left" class="style5">We'd like to introduce you <br />
              to our newly reconstructed <br />
              website:</p>
                <p align="left" class="style1"><br />
                  &gt; <a href="http://www.lewisbuilds.com/"> <font color="#005195"> <u> www.lewisbuilds.com </u> </font></a></p> &nbsp; </td>
            <td width="279" height="179" bgcolor="#FFFFFF"><p align="left" class="style4">Check out the latest at Lewis:</p>
                <p align="left" class="style3"><span class="style6"> <a href="http://www.lewisbuilds.com/experience"> <font color="#005195"> <u> Project Gallery<br />
                            <br />
                  </u></font></a><a href="http://www.lewisbuilds.com/about-us/leadership-team"><font color="#005195"><u>Leadership Profiles<br />
                  <br />
                  </u></font></a></span><a href="http://www.lewisbuilds.com/case-studies/eweb-meeting-our-client-s-unique-sustainability-goals"><font color="#005195"><u>Case Study: Sustainable Construction<br />
                  <br />
              </u></font></a><span class="style6"><a href="http://www.lewisbuilds.com/news/virtual-design-and-construction"><font color="#005195"><u>Virtual Design &amp; Construction in Action</u></font></a></span></p> &nbsp; </td>
            <td width="20" height="179" bgcolor="#FFFFFF"><img src="img/line_right.jpg" width="20" height="179" /></td>
          </tr>
      </table></td>
    </tr>
    <tr align="left" valign="top">
      <td width="623" height="100" bgcolor="#FFFFFF"><img src="img/Lewis_logo.jpg" width="623" height="100" /></td>
    </tr>
  </table></td>
    </tr>
  </table>
  <p><span class="style8">
    <forwardtoafriend>Forward to a friend </forwardtoafriend>
    <br />
No longer interested?
<unsubscribe> You can unsubscribe</unsubscribe>
    <unsubscribe></unsubscribe>
    <unsubscribe> </unsubscribe>
    <br />
    <forwardtoafriend></forwardtoafriend>
    </span></p>
</div>
</body>
</html>

BThies BThies, 6 years ago

Are your images exactly sized to the specs in the email?  Outlook 2007 does not play well with images that are not sized to exact img specs.

Make sure all your <td>'s have a width specified.

I normally don't put any code in a <tr>.  I'd suggest using valign="top" within the <td>'s instead.

Instead of centering using the <div>, use a full width table such as:
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center">


Brian Thies
Professional Email Developer
Thies Publishing

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