Template problems in Outlook 2007

I have created a template that has two side images that repeat downward as a border on the left and right of the content. I want the images to repeat down however long is needed based on the length of the content. I'm building this template for my client to use.

Since Outlook 2007 does not support background images (which would make the repeating image easy) I had to make my template with a <repeater> region to include an image, where the client can insert the left and right images as many times as needed in order to "fill" the left and right borders.

I thougth this would fix the problem, and it did, kind of. I'm still getting white gaps at the top and bottom of those table cells (even though the BG color is set to a greenish blue) Anyone have any ideas?

<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Howe Heating and Plumbing Template</title>
   <style type="text/css" media="screen">
      body {
        background:url('images/bg.jpg') repeat;
        margin:0 auto;
        font:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#000;
      }
      
      .contenttable {
          background-color: #FFFFFF;
        font:Verdana, Geneva, sans-serif;
        font-size:12px;
      }
      
      .whitebg {
          background-color: #FFFFFF;
      }


      .date {
          background:url('images/newspipeline-06.jpg') no-repeat top left;
          font-weight:bold;
          font-size:10px;
         
      }
      
      
      td.content {
          padding:20px;
          width:423px;
      }
      

      td.footer {
          font:Verdana, Geneva, sans-serif;
        font-size:10px;
        padding:20px 0 20px 0;
      }
      
      td.footer a, a:hover, a:visited, a:active {
          color:#000000;
          font-weight:bold;
          text-decoration:underline;
      }
      
      a, a:hover, a:visited, a:active {
          color:#00a0b0;
          font-weight:bold;
          text-decoration:underline;
      }
      
      h2 {
          font:Verdana, Geneva, sans-serif;
        font-size:16px;
        color:#000;
      }
      
      
      h3 {
          font:Verdana, Geneva, sans-serif;
        font-size:40px;
        font-weight:bold;
        margin:0 0 0 0;
        color:#000;
      }
      
      h4 {
          font:Verdana, Geneva, sans-serif;
        font-size:12px;
        font-weight:bold;
        margin:0 0 0 0;
        color:#000;
      }
      
      h5 {
          font:Verdana, Geneva, sans-serif;
        font-size:10px;
        font-weight:bold;
        margin:0 0 0 0;
        color:#000;
      }
      
      .request {
          background:url('images/bg.jpg') repeat;
      }
      
      .couponleft {
          background:url('images/couponborder-02.jpg') repeat-y;
      }
      
      .couponright {
          background:url('images/couponborder-03.jpg') repeat-y;
      }


   </style>
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="center">
      
      <!----good table-->
      <br><br><br>
      <table id="Table_01" width="567" border="0" cellpadding="0" cellspacing="0" class="contenttable">
    <tr>
        <td colspan="2">
            <img src="images/newspipeline.jpg" width="224" height="173" alt="News Pipeline Header"></td>
        <td width="168" height="173">
            <img src="images/newspipeline-02.jpg" width="168" height="173" alt="News Pipeline Header"></td>
        <td width="175" height="173" colspan="3"><a href="http://www.howeinc.com"><img src="images/newspipeline-03.jpg" width="175" height="173" alt="News Pipeline Header" border="0"></a></td>
    </tr>
    <tr>
        <td width="224" height="49" colspan="2">
            <img src="images/newspipeline-04.jpg" width="224" height="49" alt="News Pipeline Header"></td>
        <td width="168" height="49">
            <img src="images/newspipeline-05.jpg" width="168" height="49" alt="News Pipeline Header"></td>
        <td width="110" height="49" colspan="2" class="date" valign="top"><$title default='Enter date here'$></td>
        <td width="65" height="49">
            <img src="images/newspipeline-07.jpg" width="65" height="49" alt="News Pipeline Header"></td>
    </tr>
    <tr>
        <td width="39" valign="top" class="request"><repeater toc='false'><img src="<$imagesrc link='false'$>" width="65"></repeater></td>
        <td width="463" colspan="4" valign="top" align="left" class="content">
        
         <h2><$title default='Enter title here'$></h2>
                           <$description default='<p>Enter body content here</p>'$>
                           <br>
                           <img src="images/thanks.jpg" width="227" height="38" alt="Thanks for doing business with us!"><br>
                           <br>
                           <a href="http://www.howeinc.com">www.howeinc.com</a>
                           
                           </td>
        <td width="65" valign="top" class="request"><repeater toc='false'><img src="<$imagesrc link='false'$>" width="65"></repeater></td>
    </tr>
    <tr>
        <td width="39" valign="top" class="request">
            <img src="images/footer.jpg" width="39" height="152" alt="Footer pipe"></td>
        <td width="185" class="request" valign="top"><a href="http://www.howeinc.com/contact-us/request-a-quote.php"><img src="images/request.jpg" width="185" height="152" alt="Request a Service Call or Quote Online" border="0"></a></td>
        <td width="248" colspan="2" valign="top" class="request">
        
        <!--coupon table here-->
        <table border="0" cellpadding="0" cellspacing="0" width="248">
        <tr>
            <td colspan="3" width="248" height="59"><img src="images/couponborder.jpg" width="248" height="59" alt="Coupon Border"></td>
        </tr>
        <tr>
            <td width="12" class="couponleft"></td>
            <td width="224" valign="top" align="center" class="whitebg">
            <h3><$title default='Enter coupon headline here'$></h3>
            <h4><$title default='Enter coupon secondary line here'$></h4>
            <h5><$title link="true" default='Enter coupon link here'$></h5>
            </td>
            <td width="12" class="couponright"></td>
        </tr>
        <tr>
            <td colspan="3" valign="top"><img src="images/couponborder-04.jpg" width="248" height="24" alt="Coupon Border"></td>
        </tr>
        </table>
        <!--end coupon table-->
        
        </td>
        <td width="95" colspan="2" valign="top" class="request">
            <img src="images/footer-02.jpg" width="95" height="152" alt="Footer pipe"></td>
    </tr>
    <tr>
        <td width="39" height="1" class="request"></td>
        <td width="185" height="1" class="request"></td>
        <td width="168" height="1" class="request"></td>
        <td width="80" height="1" class="request"></td>
        <td width="30" height="1" class="request"></td>
        <td width="65" height="1" class="request"></td>
    </tr>
</table>


      <!--end good table-->

</td>
</tr>

<tr>
    <td class="footer" align="center">
    <p>You are receiving this email because you have signed up for the<br>
Howe Heating & Plumbing E-Newsletter.</p>

<p>Having trouble reading this email? <webversion>View it on your browser</webversion>.<br> 
Not interested anymore? <unsubscribe>Unsubscribe Instantly</unsubscribe>.</p>
</td>
</tr>
</table>
</body>
</html>

Here's how it looks in Outlook 2007, (but it looks fine in all the rest):
http://www.insightmarketingdesign.com/images/outlook2007.jpg

BThies BThies, 7 years ago

Your <TD>'s with class="request" do not have the same padding as your <TD> with class = "content".

Adjacent <TD>'s in the same row need to have the same padding (primarily top and bottom padding), or else it causes breaks.

Just stick a table in the "content" <TD> that is 40px smaller in width than the <TD>'s size, and align it center.  Create a space before & after the table using <DIV>&nbsp;</DIV>, and you're all set.


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

Great answer Brian, thanks for contributing.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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