Outlook 2007 Table Column Width and Spacing

I have searched everywhere and tried just about everything.  I've thoroughly followed the Guide to CSS Support in Email and looked at the Email Standards website

My template looks the same in practically every email client, except Outlook 2007 (right column width is messed up and top space should not exist).  I've tried image spacers in the left TDs of the table with no effect.  I also have only one table (no nesting).

The only CSS properties I use in this email are: padding, border, font-family, color, background and text-decoration.

Here's a screenshot in Outlook 2007. 

http://img101.imageshack.us/img101/7385/screenshotpu3.jpg

Here's how it's supposed to look.

Note:  The bottom looks cut off in Outlook 2007 because the template was too big for the screenshot, so that is fine.

Any thoughts or suggestions?  Thanks!

logicaldan, 8 years ago

i have you tried defining the widths for all your td's. I hear if you don't do that then the alignment and spacing can be thrown out of whack.

afrenyo, 7 years ago

I am running into similar problems - have you found a solution in getting the column width right?
-thanks.

BThies BThies, 7 years ago

I'll take a look and let you know what I find.

Brian


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 7 years ago

A few things:

1)  Adjacent <TD>'s need to have the same padding or it causes breaks.  Nested tables can resolve this issue.
2)  It may be better to use nested tables rather than big borders around a <DIV>
3)  It may be better to use nested tables in all situations of creating exact spacing in a <TD>, rather than using spacer images
4)  When using borders, every width in the <TD>'s  needs to be calculated to ensure they're taking into account the width of the borders

Here's code that should fix the issues.  I tested against Outlook 2007 and Outlook 2003 - displays fine.

<!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>February 2008 Acceleration</title>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="15" cellspacing="0">
  <tr>
    <td valign="middle"><div align="center" style="font-family:Arial, Helvetica, sans-serif;font-size:12px;">If you are having trouble reading this email please <a href="http://www.collegeplus.org/email/acceleration/february2008.html">view it online</a>.</div></td>
  </tr>
</table>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="750"><a href="http://www.collegeplus.org/acceleration"><img src="http://www.collegeplus.org/email/acceleration/template/images/header.jpg" alt="Acceleration. Learning at the speed of life." width="750" height="86" border="0" /></a></td>
  </tr>
</table>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="http://www.collegeplus.org"><img src="http://www.collegeplus.org/email/acceleration/template/images/cphome.jpg" alt="CollegePlus! Home" width="113" height="31" border="0" /></a></td>
    <td><a href="http://shop.globallearningstrategies.org"><img src="http://www.collegeplus.org/email/acceleration/template/images/store.jpg" alt="Store" width="69" height="31" border="0" /></a></td>
    <td><a href="http://www.globallearningstrategies.org"><img src="http://www.collegeplus.org/email/acceleration/template/images/gls.jpg" alt="Global Learning Strategies" width="52" height="31" border="0" /></a></td>
    <td><a href="http://www.collegeplus.org/acceleration/2008"><img src="http://www.collegeplus.org/email/acceleration/template/images/enewsarchive.jpg" alt="E-News Archive" width="139" height="31" border="0" /></a></td>
    <td><a href="http://www.collegeplus.org/whoweare/contactus"><img src="http://www.collegeplus.org/email/acceleration/template/images/contactus.jpg" alt="Contact Us" width="108" height="31" border="0" /></a></td>
    <td><img src="http://www.collegeplus.org/email/acceleration/template/images/vol8no2.jpg" alt="Vol. 8 No. 2" width="269" height="31" /></td>
  </tr>
</table>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="524" colspan="2" valign="top" style="border-left:2px solid #8A9AAA;"><table width="524" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding:15px 15px 0px 15px;"><a href="http://www.collegeplus.org/acceleration/2008/02/07/friendly-and-unfriendly-persuasion"><img src="http://collegeplus.org/email/acceleration/images/handshake.jpg" alt="Hand Shake" width="225" height="215" border="0" align="left" /></a><span style="font-family:Arial, Helvetica, sans-serif;font-size:18px;"><a href="http://www.collegeplus.org/acceleration/2008/02/07/friendly-and-unfriendly-persuasion" style="text-decoration:none;color:#880000;"><strong>Friendly, and Unfriendly, Persuasion</strong></a></span><br />
            <span style="font-family:Arial, Helvetica, sans-serif;font-size:12px;"> What's it take to change a culture?                             CollegePlus! grad Jonathan Krive has the answer.<br />
            <br />
            <em>By                            Jordan Starling</em> <br />
            <br />
            According to        researcher George Barna, just over half of Christians in America <a href="http://www.barna.org/FlexPage.aspx?Page=BarnaUpdate&amp;BarnaUpdateID=232">feel          comfortable communicating what they believe</a>.        In fact, in his recent book <em>Revolution</em>, Barna notes that        most believers don’t even base their decisions on the Scriptures        but instead on what they take in from the media, family members,        and peers.        CollegePlus! graduate Jonathan Krive has made it part of his        goal in life to change this disturbing phenomenon...<a href="http://www.collegeplus.org/acceleration/2008/02/07/friendly-and-unfriendly-persuasion" style="text-decoration:none;color:#880000;">Read more &gt;&gt;</a></span></td>
        </tr>
      </table></td>
    <td width="220" rowspan="2" valign="top" style="background-color:#EEEEEE;border-right:2px solid #8A9AAA;border-left:2px solid #CCCCCC;"><img src="http://www.collegeplus.org/email/acceleration/template/images/whatamericabelieves.gif" alt="What America Believes" width="220" height="30" border="0" />
      <table cellpadding="15" cellspacing="0" border="0">
        <tr>
          <td><div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;">&bull; <a href="http://www.collegeplus.org/acceleration/2008/02/14/what-americans-believe">Only        16% of non-Christian teens</a> find Christianity beneficial to<br />
              <br />
              &bull; Most Americans are not concerned with <a href="http://www.collegeplus.org/acceleration/2008/02/14/what-americans-believe">their          spiritual condition</a>.<br />
              <br />
              &bull; <a href="http://www.collegeplus.org/acceleration/2008/02/14/what-americans-believe">Just          37% of Americans</a> believe Jesus was sinless.<br />
              <br />
              &bull; Over 60% of twentysomethings <a href="http://www.collegeplus.org/acceleration/2008/02/14/what-americans-believe">drop          out of church after college</a>.<br />
              <br />
              &bull; Just 28% of Americans believe the Bible <a href="http://www.collegeplus.org/acceleration/2008/02/14/what-americans-believe">should          be          taken      literally</a>.</div></td>
        </tr>
      </table>
      <img src="http://www.collegeplus.org/email/acceleration/template/images/whatsnew.gif" alt="What America Believes" width="220" height="30" border="0" />
      <table cellpadding="15" cellspacing="0" border="0">
        <tr>
          <td><div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;"><a href="http://www.collegeplus.org/internships">Become an intern</a> and get your degree paid for!<br />
              <br />
              <a href="http://www.collegeplus.org/news/2008/02/20/coach-with-collegeplus">Now Hiring CollegePlus Coaches!</a><br />
              <br />
              <a href="http://www.globalencounter.net/blog">Visit the blog</a> of CollegePlus! students on the missions trip of a lifetime in Peru! (Feb 23-Mar 11)<br />
              <br />
              What message will today's culture listen to? Find out at this year's <a href="http://envoyschool.com/overview.html">Effective          Communication Course!<br />
              </a><br />
              Questions or comments regarding Acceleration? Send your email    to: <a href="mailto:acceleration@collegeplus.org?subject=Acceleration Comments">acceleration@collegeplus.org</a></div></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td valign="top" style="border-left:2px solid #8A9AAA;"><table width="262" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding:15px"><a href="http://www.collegeplus.org/acceleration/2008/02/07/gods-way-or-no-way"><img src="http://collegeplus.org/email/acceleration/images/suryan_pic.jpg" alt="Amanda Suryan" width="86" height="76" border="0" align="left" /></a><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;"><a href="http://www.collegeplus.org/acceleration/2008/02/07/gods-way-or-no-way" style="text-decoration:none;color:#880000;"><strong>God's Way or No Way</strong></a></span> <span style="font-family:Arial, Helvetica, sans-serif;font-size:12px;"><em><br />
            Standing strong in a sea of academic humanism. By Amanda Suryan, 2007 CollegePlus! Graduate<br />
            <br />
            </em>&quot;So what are you going to do when you graduate?&quot; This        question is one I heard repeatedly while in high school, and I typically        answered with, &quot;I don’t know.&quot; The truth was I never        thought about it much because I was scared. I had been homeschooled        sincefifth grade and had never attended public school. The thought    of going away to college...<a href="http://www.collegeplus.org/acceleration/2008/02/07/gods-way-or-no-way" style="text-decoration:none;color:#880000;">Read more &gt;&gt;</a></span><br /></td>
        </tr>
      </table></td>
    <td valign="top"><table width="262" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding:15px"><a href="http://www.collegeplus.org/acceleration/2008/02/20/increase-your-influence"><img src="http://collegeplus.org/email/acceleration/images/russ_portrait.jpg" alt="Russ Bennett" width="86" height="76" border="0" align="left" /></a><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;"><a href="http://www.collegeplus.org/acceleration/2008/02/20/increase-your-influence" style="text-decoration:none;color:#880000;"><strong>Increase</strong></a></span><span style="font-family:Arial, Helvetica, sans-serif;font-size:12px;"><br />
            <em>By Russ Bennett, CollegePlus! Coach</em> <br />
            <br />
            <br />
            <br />
            How old do you have to be before you can influence people? Jesus stunned      the leaders in the Temple with His insights as a young man. Esther      saved her people, even though she was likely a young woman. Timothy      was a young man who helped to shape the early Church.    As a teenager and young adult, you can...<a href="http://www.collegeplus.org/acceleration/2008/02/20/increase-your-influence" style="text-decoration:none;color:#880000;">Read more&gt;&gt;</a></span><br /></td>
        </tr>
      </table></td>
  </tr>
</table>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="http://www.collegeplus.org/email/acceleration/template/images/footerleft.jpg" width="147" height="31" alt="" /></td>
    <td><a href="http://www.collegeplus.org/whoweare/contactus"><img src="http://www.collegeplus.org/email/acceleration/template/images/contactusfoot.jpg" alt="Contact Us" width="83" height="31" border="0" /></a></td>
    <td><img src="http://www.collegeplus.org/email/acceleration/template/images/footerdiv1.jpg" alt=" | " width="13" height="31" border="0" /></td>
    <td><a href="http://www.collegeplus.org/whoweare/contactus"><img src="http://www.collegeplus.org/email/acceleration/template/images/phonenumber.jpg" alt="830-885-5432" width="113" height="31" border="0" /></a></td>
    <td><img src="http://www.collegeplus.org/email/acceleration/template/images/footerdiv2.jpg" alt=" | " width="13" height="31" border="0" /></td>
    <td><a href="http://www.collegeplus.org"><img src="http://www.collegeplus.org/email/acceleration/template/images/collegepluswebsite.jpg" alt="www.collegeplus.org" width="143" height="31" border="0" /></a></td>
    <td><img src="http://www.collegeplus.org/email/acceleration/template/images/footerdiv3.jpg" alt=" | " width="13" height="31" border="0" /></td>
    <td><a href="http://www.collegeplus.org/acceleration/disclaimer"><img src="http://www.collegeplus.org/email/acceleration/template/images/disclaimer.jpg" alt="Disclaimer" width="81" height="31" border="0" /></a></td>
    <td><img src="http://www.collegeplus.org/email/acceleration/template/images/footerright.jpg" alt="" width="144" height="31" /></td>
  </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 7 years ago

Of course... i didn't realize that original post was from 3 months ago...  lol


Brian Thies
Professional Email Developer
Thies Publishing
afrenyo, 7 years ago

Thanks for checking into this.  I came to the same conclusion.  Nested tables, it is; as you said, a colspan=2 td will not jive with two adjacent ones below unless they are wrapped in a table.  Thanks again.

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