Outlook 2007 - header width inconsistent

I'm a forum newbie, but have been making cm templates for a while - I can't remember ever having this issue though, and I'm going crazy and getting poor doing email tests!
My email looks fine in all clients apart from Outlook 2007. It seems like the border width is interpreted differently, as well as the width of the header.
I have an image in the banner with a green line along the bottom, and I need it to match up seamlessly with the green border of the table below it. Outlook 2007 seems to reduce the width of the table (it looks a lot thinner), while also reducing the width of the header image even more. The result is that the header image and the table border don't match up.
Any help would be absolutely fantastic! Here is the code - you will notice that this is just an exported CM template that I have tweaked slightly:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>
<title>Title</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
/* Mobile-specific Styles */
@media only screen and (max-device-width: 480px) { 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:10px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:180px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:140px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
 } 
/* Client-specific Styles */
#outlook a { padding: 0; }    /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
html, body { background-color: #ececec; margin: 0; padding: 0; }
img { height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border:none;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #3a3a3c !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {    color: #3a3a3c !important; }
/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: #3a3a3c !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */  
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
}    /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include <code _tmplitem="33" > blocks in email. */
code {
  white-space: normal;
  word-break: break-all;
}
#background-table { background-color: #ececec; }
/* Webkit Elements */
#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #cfd91e; color: #ffffff; }
#top-bar a { font-weight: normal; color: #11a49c; text-decoration: none;}
#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
/* Fonts and Content */
body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content { font-size: 12px; color: #ffffff; }
.header-content a { font-weight: bold; color: #11a49c; text-decoration: underline; }
#headline p { color: #3a3a3c; font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #cfd91e; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #3a3a3c; font-weight:bold; margin-top:10px; margin-bottom:18px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.article-title a { color: #3a3a3c; text-decoration: none; }
.article-title.with-meta {margin-bottom: 0;}
.article-meta { font-size: 13px; line-height: 20px; color: #ccc; font-weight: bold; margin-top: 0;}
.article-content { font-size: 13px; line-height: 18px; color: #3a3a3c; margin-top: 0px; margin-bottom: 18px; font-family: Arial, Helvetica, Geneva, sans-serif; }
.article-content a { color: #00707b; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #444444; }
.article-content li a { color: #cfd91e; text-decoration:none; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 10px; line-height: 14px; color: #333333; margin-top: 0px; margin-bottom: 0; }
.footer-content-left a { color: #aab401; font-weight: normal; text-decoration: none; }
.footer-content-right { font-size: 10px; line-height: 14px; color: #333333; margin-top: 0px; margin-bottom: 0; text-align:right; }
.footer-content-right a { color: #aab401; font-weight: normal; text-decoration: none; }
#footer { background-color: #043948; color: #e2e2e2; }
#footer a { color: #cfd91e; text-decoration: none; font-weight: normal; }
#permission-reminder { white-space: pre-wrap; }
#street-address { color: #3a3a3c; white-space: pre-wrap; }
</style>
<!--[if gte mso 9]>
<style _tmplitem="33" >
.article-content ol, .article-content ul {
   margin: 0 0 0 24px;
   padding: 0;
   list-style-position: inside;
}
</style>
<![endif]--></head><body><table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody><tr>
        <td align="center" bgcolor="#ececec">
            <table class="w640" border="0" cellpadding="0" cellspacing="0" width="640">
                <tbody><tr><td class="w640" height="20" width="640"></td></tr>
                
                <tr>
                    <td class="w640" width="640">
                        <table id="top-bar" class="w640" bgcolor="#00707b" border="0" cellpadding="0" cellspacing="0" width="640">
    <tbody><tr>
        <td class="w15" width="15"></td>
        <td class="w325" align="left" valign="middle" width="350">
            <table class="w325" border="0" cellpadding="0" cellspacing="0" width="350">
                <tbody><tr><td class="w325" height="8" width="350"></td></tr>
            </tbody></table>
            <div class="header-content">Email not looking beautiful? <webversion>Link to web version</webversion></div>
            <table class="w325" border="0" cellpadding="0" cellspacing="0" width="350">
                <tbody><tr><td class="w325" height="8" width="350"></td></tr>
            </tbody></table>
        </td>
        <td class="w30" width="30"></td>
        <td class="w255" align="right" valign="middle" width="255">
            <table class="w255" border="0" cellpadding="0" cellspacing="0" width="255">
                <tbody><tr><td class="w255" height="8" width="255"></td></tr>
            </tbody></table>
            <table border="0" cellpadding="0" cellspacing="0">
    <tbody><tr>
        
        <td valign="middle"><fblike><img src="https://img.createsend1.com/img/templatebuilder/like-glyph.png" alt="Facebook icon"="" border="0" height="14" width="8"></fblike></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><fblike>Like</fblike></div></td>
        
        
        <td class="w10" width="10"></td>
        <td valign="middle"><tweet><img src="https://img.createsend1.com/img/templatebuilder/tweet-glyph.png" alt="Twitter icon"="" border="0" height="13" width="17"></tweet></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><tweet>Tweet</tweet></div></td>
        
        
        <td class="w10" width="10"></td>
        <td valign="middle"><forwardtoafriend><img src="https://img.createsend1.com/img/templatebuilder/forward-glyph.png" alt="Forward icon"="" border="0" height="14" width="19"></forwardtoafriend></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><forwardtoafriend>Forward</forwardtoafriend></div></td>
        
    </tr>
</tbody></table>
            <table class="w255" border="0" cellpadding="0" cellspacing="0" width="255">
                <tbody><tr><td class="w255" height="8" width="255"></td></tr>
            </tbody></table>
        </td>
        <td class="w15" width="15"></td>
    </tr>
</tbody></table>
                        
                    </td>
                </tr>
                <tr>
                <td id="header" class="w640" align="center" bgcolor="#ffffff" width="640">
    
    <table class="w640" border="0" cellpadding="0" cellspacing="0" width="640">
        <tbody>
        <tr>
            <td colspan="3" class="w30">
              <img src="images/header.jpg" width="640" height="199" /></td>
            </tr>
    </tbody></table>
    
    
</td>
                </tr>
                
                
                <tr id="simple-content-row"><td class="w640" bgcolor="#ffffff" width="640">
  <table class="w640" border="0" style="border:solid 12px #cfd91e;" cellpadding="0" cellspacing="0" width="640">
        <tbody><tr>
            <td class="w30" width="30"></td>
            <td class="w580" width="580">
                <repeater>
                    
                    <layout label="Text only">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="10" width="580"></td></tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                                        
                    
                    <layout label="Text with full-width image">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                </td>
                            </tr>
                            <tr>
                                <td class="w580" width="580"><img editable="true" label="Image" class="w580" border="0" width="580"></td>
                            </tr>
                            <tr><td class="w580" height="15" width="580"></td></tr>
                            <tr>
                                <td class="w580" width="580">
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="10" width="580"></td></tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                 <layout label="Text with right-aligned image">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                    <table align="right" border="0" cellpadding="0" cellspacing="0">
                                        <tbody><tr>
                                            <td class="w30" width="15"></td>
                                            <td><img editable="true" label="Image" class="w300" border="0" width="300"></td>
                                        </tr>
                                        <tr><td class="w30" height="5" width="15"></td><td></td></tr>
                                    </tbody></table>
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="10" width="580"></td></tr>
                        </tbody></table>
                          <img style="margin:0; padding:0;" src="images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
           <layout label="Text with left-aligned image">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                    <table align="left" border="0" cellpadding="0" cellspacing="0">
                                        <tbody><tr>
                                            <td><img editable="true" label="Image" class="w300" border="0" width="300"></td>
                                            <td class="w30" width="15"></td>
                                        </tr>
                                        <tr><td></td><td class="w30" height="5" width="15"></td></tr>
                                    </tbody></table>
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="10" width="580"></td></tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                                                                                
                    
                    <layout label="Two columns">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w275" valign="top" width="275">
                                    <table class="w275" border="0" cellpadding="0" cellspacing="0" width="275">
                                        <tbody><tr>
                                            <td class="w275" width="275">
                                                <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w275" height="10" width="275"></td></tr>
                                    </tbody></table>
                                </td>
                                <td class="w30" width="30"></td>
                                <td class="w275" valign="top" width="275">
                                    <table class="w275" border="0" cellpadding="0" cellspacing="0" width="275">
                                        <tbody><tr>
                                            <td class="w275" width="275">
                                                <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w275" height="10" width="275"></td></tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
           <layout label="Image gallery">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody>
                            <tr><td height="15"></td></tr>
                            <tr>
                                <td class="w180" valign="top" width="180">
                                    <table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                        <tbody>
                                        
                                        <tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                    </tbody></table>
                                </td>
                                <td width="20"></td>
                                <td class="w180" valign="top" width="180">
                                    <table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                    </tbody></table>
                                </td>
                                <td width="20"></td>
                                <td class="w180" valign="top" width="180">
                                    <table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                </repeater>
   <!--bottom section -->
                        <table class="w580" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody>
                            <tr><td colspan="2" height="30"></td></tr>
                            <tr>
                                <td>
                                
                             <table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><forwardtoafriend><img src="images/forward-to-a-friend-img.jpg" width="211" height="75" alt="Forward to a friend" /></forwardtoafriend></td>
    <td><table title="links"><tr>
      <td><a href="#.html" target="_blank"><img src="images/link1.jpg" width="280" height="17" alt="alt text" longdesc="" /></a></td></tr><tr>
      <td><a href="#.html" target="_blank"><img src="images/link2.jpg" width="280" height="23" alt="alt text" longdesc="" /></a></td></tr></table></td>
  </tr>
  <tr>
    <td>
    
    <table style="margin:0; padding:0; border-collapse:collapse;" class="footer-content-left" title="forward text"><tr><td width="33" height="42"></td><td valign="top" style="vertical-align:top; margin:0; padding:0;">Know someone who may be interested in this email? <span style="color:#009D97;"> <forwardtoafriend>Forward it>></forwardtoafriend></span></td><td width="120"></td></tr></table>
    
    </td>
    <td>
    <table><tr>
    <td><a href="http://www.facebook.com/" target="_blank"><img src="images/facebook-link.jpg" width="281" height="52" alt="Find us" longdesc="http://www.facebook.com/" /></a></td>
    </tr></table>
    
    </td>
  </tr>
  <tr>
    <td>
    
     <table title="logos"><tr><td height="20" colspan="2"></td></tr>
    <tr>
      <td><a href="#.html" target="_blank"><img src="images/logo.jpg" width="138" height="93" alt="alt text" longdesc="" /></a></td><td><a href="" target="_blank"><img src="images/logo2.jpg" width="135" height="90" alt="alt text" longdesc="" /></a></td></tr></table>
    
    
    </td>
    <td>
     <table  class="footer-content-right" style="margin:0; padding:0;" title="forward text"><tr><td width="15"></td><td valign="top" style="vertical-align:top">Don't want to receive this email anymore? <span style="color:#009D97;"> <unsubscribe>Unsubscribe</unsubscribe></span></td><td width="42"></td></tr></table>
    
    </td>
  </tr>
</table>
   </td>
                            </tr>
                        </tbody></table>
                   
                   
                <!--end bottom section -->
                
                
            </td>
            <td class="w30" width="30"></td>
        </tr>
    </tbody></table>
</td></tr>
                <tr><td class="w640" bgcolor="#ececec" height="15" width="640"></td></tr>
                
                <tr>
                <td class="w640" width="640">
    <table id="footer" class="w640" bgcolor="#ececec" border="0" cellpadding="0" cellspacing="0" width="640">
    <tr><td></td></tr></table>
</td>
                </tr>
                <tr><td class="w640" height="60" width="640"></td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table></body></html>
Viv, 4 years ago

Just wanted to add a note to the above - the same issue occurs in Outlook 2010.
Also, should I be adding code like the above to posts - maybe it's not very helpful... Sorry! I have just uploaded a test version of this template, stripping out the branded content. You can see that the grey header should match up nicely with the border around the table below. I would so love any advice!

https://designandpost.createsend.com/t/ViewEmail/r/8E49AA918E4A3982/C67FD2F38AC4859C/

roshodgekiss roshodgekiss, 4 years ago

Hi Viv, the issue here is that Outlook 2007/2012 are very sensitive about widths in table layouts. What we see in a lot of cases is that the content inserted into the template exceeds the width of the container tables, causing surrounding 'padding' columns to collapse. The only way to fix this is to ensure that all your column + border widths equal the width of the container table.

I've been able to reproduce this issue and from what I can see, the border width on the template design hasn't been taken into account when calculating the width of the template. The template width has been set to 640px, however the real width of 2 x 12px borders + 2 x 30px 'padding' columns + 580px content column = 664px. If you can shave 12px off the width (ie. change the w30 columns to 18px width instead), then the design will be fine.

Thanks, Viv! I hope this solves this issue for you - let us know how you go :)


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

Thanks so much - I really appreciate your time and answer!

I followed your instructions - that definitely makes sense. I have decreased the width of the outer columns from 30 px to 18 px. I just did a test though, and the result (in Outlook 2007) is the same. Do you think some of the internal columns could be adding to the total width? I.e, the small columns between the images. They do seem to add up correctly though?

Any more ideas? My code is pasted below (found the code formatting thing too!)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>
<title>Walking Maps - Create, discover and share walking routes anywhere in Australia.</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
/* Mobile-specific Styles */
@media only screen and (max-device-width: 480px) { 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:10px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:180px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:140px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
 } 
/* Client-specific Styles */
#outlook a { padding: 0; }    /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
html, body { background-color: #ececec; margin: 0; padding: 0; }
img { height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border:none;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #3a3a3c !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {    color: #3a3a3c !important; }
/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: #3a3a3c !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */  
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
}    /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include <code _tmplitem="33" > blocks in email. */
code {
  white-space: normal;
  word-break: break-all;
}
#background-table { background-color: #ececec; }
/* Webkit Elements */
#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #cfd91e; color: #ffffff; }
#top-bar a { font-weight: normal; color: #11a49c; text-decoration: none;}
#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
/* Fonts and Content */
body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content { font-size: 12px; color: #ffffff; }
.header-content a { font-weight: bold; color: #11a49c; text-decoration: underline; }
#headline p { color: #3a3a3c; font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #cfd91e; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #3a3a3c; font-weight:bold; margin-top:10px; margin-bottom:18px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.article-title a { color: #3a3a3c; text-decoration: none; }
.article-title.with-meta {margin-bottom: 0;}
.article-meta { font-size: 13px; line-height: 20px; color: #ccc; font-weight: bold; margin-top: 0;}
.article-content { font-size: 13px; line-height: 18px; color: #3a3a3c; margin-top: 0px; margin-bottom: 18px; font-family: Arial, Helvetica, Geneva, sans-serif; }
.article-content a { color: #00707b; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #444444; }
.article-content li a { color: #cfd91e; text-decoration:none; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 10px; line-height: 14px; color: #333333; margin-top: 0px; margin-bottom: 0; }
.footer-content-left a { color: #aab401; font-weight: normal; text-decoration: none; }
.footer-content-right { font-size: 10px; line-height: 14px; color: #333333; margin-top: 0px; margin-bottom: 0; text-align:right; }
.footer-content-right a { color: #aab401; font-weight: normal; text-decoration: none; }
#footer { background-color: #043948; color: #e2e2e2; }
#footer a { color: #cfd91e; text-decoration: none; font-weight: normal; }
#permission-reminder { white-space: pre-wrap; }
#street-address { color: #3a3a3c; white-space: pre-wrap; }
</style>
<!--[if gte mso 9]>
<style _tmplitem="33" >
.article-content ol, .article-content ul {
   margin: 0 0 0 24px;
   padding: 0;
   list-style-position: inside;
}
</style>
<![endif]--></head><body><table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody><tr>
        <td align="center" bgcolor="#ececec">
            <table class="w640" border="0" cellpadding="0" cellspacing="0" width="640">
                <tbody><tr><td class="w640" height="20" width="640"></td></tr>
                
                <tr>
                    <td class="w640" width="640">
                        <table id="top-bar" class="w640" bgcolor="#00707b" border="0" cellpadding="0" cellspacing="0" width="640">
    <tbody><tr>
        <td class="w15" width="15"></td>
        <td class="w325" align="left" valign="middle" width="350">
            <table class="w325" border="0" cellpadding="0" cellspacing="0" width="350">
                <tbody><tr><td class="w325" height="8" width="350"></td></tr>
            </tbody></table>
            <div class="header-content">Email not looking beautiful? <webversion>Link to web version</webversion></div>
            <table class="w325" border="0" cellpadding="0" cellspacing="0" width="350">
                <tbody><tr><td class="w325" height="8" width="350"></td></tr>
            </tbody></table>
        </td>
        <td class="w30" width="18"></td>
        <td class="w255" align="right" valign="middle" width="255">
            <table class="w255" border="0" cellpadding="0" cellspacing="0" width="255">
                <tbody><tr><td class="w255" height="8" width="255"></td></tr>
            </tbody></table>
            <table border="0" cellpadding="0" cellspacing="0">
    <tbody><tr>
        
        <td valign="middle"><fblike><img src="images/like-glyph_0.png" alt="Facebook icon" ="" border="0" height="14" width="8"></fblike></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><fblike>Like</fblike></div></td>
        
        
        <td class="w10" width="10"></td>
        <td valign="middle"><tweet><img src="images/tweet-glyph_1.png" alt="Twitter icon" ="" border="0" height="13" width="17"></tweet></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><tweet>Tweet</tweet></div></td>
        
        
        <td class="w10" width="10"></td>
        <td valign="middle"><forwardtoafriend><img src="images/forward-glyph_2.png" alt="Forward icon" ="" border="0" height="14" width="19"></forwardtoafriend></td>
        <td width="3"></td>
        <td valign="middle"><div class="header-content"><forwardtoafriend>Forward</forwardtoafriend></div></td>
        
    </tr>
</tbody></table>
            <table class="w255" border="0" cellpadding="0" cellspacing="0" width="255">
                <tbody><tr><td class="w255" height="8" width="255"></td></tr>
            </tbody></table>
        </td>
        <td class="w15" width="15"></td>
    </tr>
</tbody></table>
                        
                    </td>
                </tr>
                <tr>
                <td id="header" class="w640" align="center" bgcolor="#ffffff" width="640">
    
    <table class="w640" border="0" cellpadding="0" cellspacing="0" width="640">
        <tbody>
        <tr>
            <td colspan="3" class="w30">
              <img src="images/header.jpg" width="640" height="199" /></td>
            </tr>
    </tbody></table>
    
    
</td>
                </tr>
                
                
                <tr id="simple-content-row"><td class="w640" bgcolor="#ffffff" width="640">
  <table class="w640" border="0" style="border:solid 12px #cfd91e;" cellpadding="0" cellspacing="0" width="640">
        <tbody><tr>
            <td class="w30" width="18"></td>
            <td class="w580" width="580">
                <repeater>
                    
                    <layout label="Text only">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="10" width="580"></td></tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                                        
                    
                    <layout label="Text with full-width image">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                </td>
                            </tr>
                            <tr>
                                <td class="w580" width="580"><img editable="true" label="Image" class="w580" border="0" width="580"></td>
                            </tr>
                            <tr><td class="w580" height="15" width="580"></td></tr>
                            <tr>
                                <td class="w580" width="580">
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="10" width="580"></td></tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                                        
                    
                    <layout label="Text with right-aligned image">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                    <table align="right" border="0" cellpadding="0" cellspacing="0">
                                        <tbody><tr>
                                            <td class="w30" width="15"></td>
                                            <td><img editable="true" label="Image" class="w300" border="0" width="300"></td>
                                        </tr>
                                        <tr><td class="w30" height="5" width="15"></td><td></td></tr>
                                    </tbody></table>
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="10" width="580"></td></tr>
                        </tbody></table>
                          <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                                        
                    
                    <layout label="Text with left-aligned image">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                    <table align="left" border="0" cellpadding="0" cellspacing="0">
                                        <tbody><tr>
                                            <td><img editable="true" label="Image" class="w300" border="0" width="300"></td>
                                            <td class="w30" width="15"></td>
                                        </tr>
                                        <tr><td></td><td class="w30" height="5" width="15"></td></tr>
                                    </tbody></table>
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="10" width="580"></td></tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                                                                                
                    
                    <layout label="Two columns">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody><tr>
                                <td class="w275" valign="top" width="275">
                                    <table class="w275" border="0" cellpadding="0" cellspacing="0" width="275">
                                        <tbody><tr>
                                            <td class="w275" width="275">
                                                <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w275" height="10" width="275"></td></tr>
                                    </tbody></table>
                                </td>
                                <td class="w30" width="18"></td>
                                <td class="w275" valign="top" width="275">
                                    <table class="w275" border="0" cellpadding="0" cellspacing="0" width="275">
                                        <tbody><tr>
                                            <td class="w275" width="275">
                                                <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w275" height="10" width="275"></td></tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                                        
                                        
                    
                    <layout label="Image gallery">
                        <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody>
                            <tr><td height="15"></td></tr>
                            <tr>
                                <td class="w180" valign="top" width="180">
                                    <table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                        <tbody>
                                        
                                        <tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                    </tbody></table>
                                </td>
                                <td width="20"></td>
                                <td class="w180" valign="top" width="180">
                                    <table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                    </tbody></table>
                                </td>
                                <td width="20"></td>
                                <td class="w180" valign="top" width="180">
                                    <table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div class="article-content" align="left">
                                                    <multiline label="Description">Enter your description</multiline>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr><td class="w180" height="10" width="180"></td></tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody></table>
                        <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" />
                    </layout>
                </repeater>
                
                
                
              
                        <table class="w580" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" width="580">
                            <tbody>
                            <tr><td colspan="2" height="30"></td></tr>
                            <tr>
                                <td>
                                
                             <table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><forwardtoafriend><img src="images/forward-to-a-friend-img.jpg" width="211" height="75" alt="Forward to a friend" /></forwardtoafriend></td>
    <td><table title="links"><tr>
      <td><a href="http://www.walkingmaps.com.au/Home.action" target="_blank"><img src="images/walkingmaps-link.jpg" width="280" height="17" alt="walkingmaps.org.au" longdesc="http://www.walkingmaps.com.au/Home.action" /></a></td></tr><tr>
      <td><a href="http://www.victoriawalks.org.au/" target="_blank"><img src="images/victoriawalks-link.jpg" width="280" height="23" alt="www.victoriawalks.org.au" longdesc="http://www.victoriawalks.org.au/" /></a></td></tr></table></td>
  </tr>
  <tr>
    <td>
    
    <table style="margin:0; padding:0; border-collapse:collapse;" class="footer-content-left" title="forward text"><tr><td width="33" height="42"></td><td valign="top" style="vertical-align:top; margin:0; padding:0;">Know someone who may be interested in this email? <span style="color:#009D97;"> <forwardtoafriend>Forward it>></forwardtoafriend></span></td><td width="120"></td></tr></table>
    
    </td>
    <td>
    <table><tr>
    <td><a href="http://www.facebook.com/pages/Victoria-Walks-Official-Facebook/125998204092777" target="_blank"><img src="images/facebook-link.jpg" width="281" height="52" alt="Find Victoria Walk" longdesc="http://www.facebook.com/pages/Victoria-Walks-Official-Facebook/125998204092777" /></a></td>
    </tr></table>
    
    </td>
  </tr>
  <tr>
    <td>
    
     <table title="logos"><tr><td height="20" colspan="2"></td></tr>
    <tr>
      <td><a href="http://www.victoriawalks.org.au/" target="_blank"><img src="images/victoriawalks-logo.jpg" width="138" height="93" alt="Victoria Walks logo" longdesc="http://www.victoriawalks.org.au/" /></a></td><td><a href="http://www.vichealth.vic.gov.au/" target="_blank"><img src="images/vichealth-logo.jpg" width="135" height="90" alt="VicHealth" longdesc="http://www.vichealth.vic.gov.au/" /></a></td></tr></table>
    
    
    </td>
    <td>
     <table class="footer-content-right" style="margin:0; padding:0;" title="forward text"><tr><td width="15"></td><td valign="top" style="vertical-align:top">Don't want to receive this email anymore? <span style="color:#009D97;"> <unsubscribe>Unsubscribe</unsubscribe></span></td><td width="42"></td></tr></table>
    
    </td>
  </tr>
</table>
   
                                
                                
                                
                                  
                                </td>
                            </tr>
                        </tbody></table>
                   
                   
                
                
                
            </td>
            <td class="w30" width="18"></td>
        </tr>
    </tbody></table>
</td></tr>
                <tr><td class="w640" bgcolor="#ececec" height="15" width="640"></td></tr>
                
                <tr>
                <td class="w640" width="640">
    <table id="footer" class="w640" bgcolor="#ececec" border="0" cellpadding="0" cellspacing="0" width="640">
    <tr><td></td></tr></table>
</td>
                </tr>
                <tr><td class="w640" height="60" width="640"></td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table></body></html>
roshodgekiss roshodgekiss, 4 years ago

Hi Viv, I finally got it working after a little work - it turned out that there were still spacing issues in the header and body of the email, plus the design just really didn't like those borders. Instead, I nested the repeaters in a table with bgcolor="#ffffff", which in turn is nested in a #cfd91e cell.

A little tip, also: make sure you remove height: auto; line-height: 100%; from your images, as these cause strange display issues in Outlook 2000.

Here's the final template code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="background-color:#ececec;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<head>
<title>Walking Maps - Create, discover and share walking routes anywhere in Australia.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@media only screen and (max-device-width: 480px) {
table[class=w0], td[class=w0] {
    width: 0 !important;
}
table[class=w10], td[class=w10], img[class=w10] {
    width:10px !important;
}
table[class=w15], td[class=w15], img[class=w15] {
    width:5px !important;
}
table[class=w30], td[class=w30], img[class=w30] {
    width:10px !important;
}
table[class=w60], td[class=w60], img[class=w60] {
    width:10px !important;
}
table[class=w125], td[class=w125], img[class=w125] {
    width:80px !important;
}
table[class=w130], td[class=w130], img[class=w130] {
    width:55px !important;
}
table[class=w140], td[class=w140], img[class=w140] {
    width:90px !important;
}
table[class=w160], td[class=w160], img[class=w160] {
    width:180px !important;
}
table[class=w170], td[class=w170], img[class=w170] {
    width:100px !important;
}
table[class=w180], td[class=w180], img[class=w180] {
    width:80px !important;
}
table[class=w195], td[class=w195], img[class=w195] {
    width:80px !important;
}
table[class=w220], td[class=w220], img[class=w220] {
    width:80px !important;
}
table[class=w240], td[class=w240], img[class=w240] {
    width:180px !important;
}
table[class=w255], td[class=w255], img[class=w255] {
    width:185px !important;
}
table[class=w275], td[class=w275], img[class=w275] {
    width:135px !important;
}
table[class=w280], td[class=w280], img[class=w280] {
    width:135px !important;
}
table[class=w300], td[class=w300], img[class=w300] {
    width:140px !important;
}
table[class=w325], td[class=w325], img[class=w325] {
    width:95px !important;
}
table[class=w360], td[class=w360], img[class=w360] {
    width:140px !important;
}
table[class=w410], td[class=w410], img[class=w410] {
    width:180px !important;
}
table[class=w470], td[class=w470], img[class=w470] {
    width:200px !important;
}
table[class=w580], td[class=w580], img[class=w580] {
    width:280px !important;
}
table[class=w640], td[class=w640], img[class=w640] {
    width:300px !important;
}
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide {
    display:none !important;
}
table[class=h0], td[class=h0] {
    height: 0 !important;
}
p[class=footer-content-left] {
    text-align: center !important;
}
#headline p {
    font-size: 30px !important;
}
}
#outlook a {
    padding: 0;
}
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
    display:block !important;
}
html, body {
    background-color: #ececec;
    margin: 0;
    padding: 0;
}
img {
    display: block;
    border:none;
}
br, strong br, b br, em br, i br {
    line-height:100%;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 100% !important;
    -webkit-font-smoothing: antialiased;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #3a3a3c !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: #3a3a3c !important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: #3a3a3c !important;
}
table td, table tr {
    border-collapse: collapse;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
    color: black;
    text-decoration: none !important;
    border-bottom: none !important;
    background: none !important;
}
code {
    white-space: normal;
    word-break: break-all;
}
#background-table {
    background-color: #ececec;
}
#top-bar {
    border-radius:6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius:6px 6px 0px 0px;
    -webkit-font-smoothing: antialiased;
    background-color: #cfd91e;
    color: #ffffff;
}
#top-bar a {
    font-weight: normal;
    color: #11a49c;
    text-decoration: none;
}
#footer {
    border-radius:0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    -webkit-border-radius:0px 0px 6px 6px;
    -webkit-font-smoothing: antialiased;
}
body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.header-content, .footer-content-left, .footer-content-right {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
.header-content {
    font-size: 12px;
    color: #ffffff;
}
.header-content a {
    font-weight: bold;
    color: #11a49c;
    text-decoration: underline;
}
#headline p {
    color: #3a3a3c;
    font-family: Arial, Helvetica, Geneva, sans-serif;
    font-size: 36px;
    text-align: center;
    margin-top:0px;
    margin-bottom:30px;
}
#headline p a {
    color: #cfd91e;
    text-decoration: none;
}
.article-title {
    font-size: 18px;
    line-height:24px;
    color: #3a3a3c;
    font-weight:bold;
    margin-top:10px;
    margin-bottom:18px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.article-title a {
    color: #3a3a3c;
    text-decoration: none;
}
.article-title.with-meta {
    margin-bottom: 0;
}
.article-meta {
    font-size: 13px;
    line-height: 20px;
    color: #ccc;
    font-weight: bold;
    margin-top: 0;
}
.article-content {
    font-size: 13px;
    line-height: 18px;
    color: #3a3a3c;
    margin-top: 0px;
    margin-bottom: 18px;
    font-family: Arial, Helvetica, Geneva, sans-serif;
}
.article-content a {
    color: #00707b;
    font-weight:bold;
    text-decoration:none;
}
.article-content img {
    max-width: 100%
}
.article-content ol, .article-content ul {
    margin-top:0px;
    margin-bottom:18px;
    margin-left:19px;
    padding:0;
}
.article-content li {
    font-size: 13px;
    line-height: 18px;
    color: #444444;
}
.article-content li a {
    color: #cfd91e;
    text-decoration:none;
}
.article-content p {
    margin-bottom: 15px;
}
.footer-content-left {
    font-size: 10px;
    line-height: 14px;
    color: #333333;
    margin-top: 0px;
    margin-bottom: 0;
}
.footer-content-left a {
    color: #aab401;
    font-weight: normal;
    text-decoration: none;
}
.footer-content-right {
    font-size: 10px;
    line-height: 14px;
    color: #333333;
    margin-top: 0px;
    margin-bottom: 0;
    text-align:right;
}
.footer-content-right a {
    color: #aab401;
    font-weight: normal;
    text-decoration: none;
}
#footer {
    background-color: #043948;
    color: #e2e2e2;
}
#footer a {
    color: #cfd91e;
    text-decoration: none;
    font-weight: normal;
}
#permission-reminder {
    white-space: pre-wrap;
}
#street-address {
    color: #3a3a3c;
    white-space: pre-wrap;
}
.footer-content-left1 {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
.footer-content-right1 {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
.header-content1 {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
.header-content1 {
    font-size: 12px;
    color: #ffffff;
}
.footer-content-left2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.footer-content-right2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.header-content2 {-webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.header-content2 {font-size: 12px; color: #ffffff; }
</style>
<!--[if gte mso 9]>
<style _tmplitem="33" >
.article-content ol, .article-content ul {
   margin: 0 0 0 24px;
   padding: 0;
   list-style-position: inside;
}
</style>
<![endif]-->
<body style="background-color:#ececec;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;" >
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#ececec;" >
  <tbody>
    <tr>
      <td bgcolor="#ececec"><table width="640" border="0" align="center" cellpadding="0" cellspacing="0" class="w640">
          <tbody>
            <tr>
              <td class="w640" height="20" width="640"></td>
            </tr>
            <tr>
              <td class="w640" width="640"><table id="top-bar" class="w640" bgcolor="#00707b" border="0" cellpadding="0" cellspacing="0" width="640" style="border-radius:6px 6px 0px 0px;-moz-border-radius:6px 6px 0px 0px;-webkit-border-radius:6px 6px 0px 0px;-webkit-font-smoothing:antialiased;background-color:#cfd91e;color:#ffffff;" >
                  <tbody>
                    <tr>
                      <td class="w10" width="10"></td>
                      <td class="w325" align="left" valign="middle" width="350"><table class="w325" border="0" cellpadding="0" cellspacing="0" width="350">
                          <tbody>
                            <tr>
                              <td class="w325" height="8" width="350"></td>
                            </tr>
                          </tbody>
                        </table>
                        <div class="header-content2">Email not looking beautiful?
                          <webversion>Link to web version</webversion>
                        </div>
                        <table class="w325" border="0" cellpadding="0" cellspacing="0" width="350">
                          <tbody>
                            <tr>
                              <td class="w325" height="8" width="350"></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td class="w15" width="15"></td>
                      <td class="w255" align="right" valign="middle" width="255"><table class="w255" border="0" cellpadding="0" cellspacing="0" width="255">
                          <tbody>
                            <tr>
                              <td class="w255" height="8" width="255"></td>
                            </tr>
                          </tbody>
                        </table>
                        <table border="0" cellpadding="0" cellspacing="0">
                          <tbody>
                            <tr>
                              <td valign="middle"><fblike><img src="/images/csimport/like-glyph_0.png" alt="Facebook icon" ="" border="0" height="14" width="8" /></fblike></td>
                              <td width="3"></td>
                              <td valign="middle"><div class="header-content1">
                                  <fblike>Like</fblike>
                                </div></td>
                              <td class="w10" width="10"></td>
                              <td valign="middle"><tweet><img src="/images/csimport/tweet-glyph_1.png" alt="Twitter icon" ="" border="0" height="13" width="17" /></tweet></td>
                              <td width="3"></td>
                              <td valign="middle"><div class="header-content1">
                                  <tweet>Tweet</tweet>
                                </div></td>
                              <td class="w10" width="10"></td>
                              <td valign="middle"><forwardtoafriend><img src="/images/csimport/forward-glyph_2.png" alt="Forward icon" ="" border="0" height="14" width="19" /></forwardtoafriend></td>
                              <td width="3"></td>
                              <td valign="middle"><div class="header-content1">
                                  <forwardtoafriend>Forward</forwardtoafriend>
                                </div></td>
                            </tr>
                          </tbody>
                        </table>
                        <table class="w255" border="0" cellpadding="0" cellspacing="0" width="255">
                          <tbody>
                            <tr>
                              <td class="w255" height="8" width="255"></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td class="w10" width="10"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td id="header" class="w640" align="center" bgcolor="#ffffff" width="640"><table class="w640" border="0" cellpadding="0" cellspacing="0" width="640">
                  <tbody>
                    <tr>
                      <td colspan="3" class="w15"><span class="w30"><img src="/images/header.jpg" alt="Walking Maps" width="640" height="199" /></span></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr id="simple-content-row">
              <td class="w640" bgcolor="#cfd91e" width="640" height="15"></td>
            </tr>
            <tr id="simple-content-row">
              <td class="w640" bgcolor="#cfd91e" width="640"><table class="w640" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" width="610" align="center">
                  <tbody>
                    <tr>
                      <td class="w15" width="15"></td>
                      <td class="w580" width="580"><table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                          <tbody>
                            <tr>
                              <td class="w580" width="580"><repeater>
                                  <layout label="Text only">
                                    <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                                      <tbody>
                                        <tr>
                                          <td class="w580" width="580"><p class="article-title" align="left">
                                              <singleline label="Title">Add a title</singleline>
                                            </p>
                                            <div class="article-content" align="left">
                                              <multiline label="Description">Enter your description</multiline>
                                            </div></td>
                                        </tr>
                                        <tr>
                                          <td class="w580" height="10" width="580"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" /> </layout>
                                  <layout label="Text with full-width image">
                                    <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                                      <tbody>
                                        <tr>
                                          <td class="w580" width="580"><p class="article-title" align="left">
                                              <singleline label="Title">Add a title</singleline>
                                            </p></td>
                                        </tr>
                                        <tr>
                                          <td class="w580" width="580"><img editable="true" label="Image" class="w580" border="0" width="580"></td>
                                        </tr>
                                        <tr>
                                          <td class="w580" height="15" width="580"></td>
                                        </tr>
                                        <tr>
                                          <td class="w580" width="580"><div class="article-content" align="left">
                                              <multiline label="Description">Enter your description</multiline>
                                            </div></td>
                                        </tr>
                                        <tr>
                                          <td class="w580" height="10" width="580"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" /> </layout>
                                  <layout label="Text with right-aligned image">
                                    <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                                      <tbody>
                                        <tr>
                                          <td class="w580" width="580"><p class="article-title" align="left">
                                              <singleline label="Title">Add a title</singleline>
                                            </p>
                                            <table align="right" border="0" cellpadding="0" cellspacing="0">
                                              <tbody>
                                                <tr>
                                                  <td class="w30" width="15"></td>
                                                  <td><img editable="true" label="Image" class="w300" border="0" width="300"></td>
                                                </tr>
                                                <tr>
                                                  <td class="w30" height="5" width="15"></td>
                                                  <td></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                            <div class="article-content" align="left">
                                              <multiline label="Description">Enter your description</multiline>
                                            </div></td>
                                        </tr>
                                        <tr>
                                          <td class="w580" height="10" width="580"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" /> </layout>
                                  <layout label="Text with left-aligned image">
                                    <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                                      <tbody>
                                        <tr>
                                          <td class="w580" width="580"><p class="article-title" align="left">
                                              <singleline label="Title">Add a title</singleline>
                                            </p>
                                            <table align="left" border="0" cellpadding="0" cellspacing="0">
                                              <tbody>
                                                <tr>
                                                  <td><img editable="true" label="Image" class="w300" border="0" width="300"></td>
                                                  <td class="w30" width="15"></td>
                                                </tr>
                                                <tr>
                                                  <td></td>
                                                  <td class="w30" height="5" width="15"></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                            <div class="article-content" align="left">
                                              <multiline label="Description">Enter your description</multiline>
                                            </div></td>
                                        </tr>
                                        <tr>
                                          <td class="w580" height="10" width="580"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" /> </layout>
                                  <layout label="Two columns">
                                    <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                                      <tbody>
                                        <tr>
                                          <td class="w275" valign="top" width="275"><table class="w275" border="0" cellpadding="0" cellspacing="0" width="275">
                                              <tbody>
                                                <tr>
                                                  <td class="w275" width="275"><p class="article-title" align="left">
                                                      <singleline label="Title">Add a title</singleline>
                                                    </p>
                                                    <div class="article-content" align="left">
                                                      <multiline label="Description">Enter your description</multiline>
                                                    </div></td>
                                                </tr>
                                                <tr>
                                                  <td class="w275" height="10" width="275"></td>
                                                </tr>
                                              </tbody>
                                            </table></td>
                                          <td class="w30" width="30"></td>
                                          <td class="w275" valign="top" width="275"><table class="w275" border="0" cellpadding="0" cellspacing="0" width="275">
                                              <tbody>
                                                <tr>
                                                  <td class="w275" width="275"><p class="article-title" align="left">
                                                      <singleline label="Title">Add a title</singleline>
                                                    </p>
                                                    <div class="article-content" align="left">
                                                      <multiline label="Description">Enter your description</multiline>
                                                    </div></td>
                                                </tr>
                                                <tr>
                                                  <td class="w275" height="10" width="275"></td>
                                                </tr>
                                              </tbody>
                                            </table></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" /> </layout>
                                  <layout label="Image gallery">
                                    <table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
                                      <tbody>
                                        <tr>
                                          <td height="15"></td>
                                        </tr>
                                        <tr>
                                          <td class="w180" valign="top" width="180"><table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                              <tbody>
                                                <tr>
                                                  <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" height="10" width="180"></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" width="180"><div class="article-content" align="left">
                                                      <multiline label="Description">Enter your description</multiline>
                                                    </div></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" height="10" width="180"></td>
                                                </tr>
                                              </tbody>
                                            </table></td>
                                          <td width="20"></td>
                                          <td class="w180" valign="top" width="180"><table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                              <tbody>
                                                <tr>
                                                  <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" height="10" width="180"></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" width="180"><div class="article-content" align="left">
                                                      <multiline label="Description">Enter your description</multiline>
                                                    </div></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" height="10" width="180"></td>
                                                </tr>
                                              </tbody>
                                            </table></td>
                                          <td width="20"></td>
                                          <td class="w180" valign="top" width="180"><table class="w180" border="0" cellpadding="0" cellspacing="0" width="180">
                                              <tbody>
                                                <tr>
                                                  <td class="w180" width="180"><img editable="true" label="Image" class="w180" border="0" width="180"></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" height="10" width="180"></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" width="180"><div class="article-content" align="left">
                                                      <multiline label="Description">Enter your description</multiline>
                                                    </div></td>
                                                </tr>
                                                <tr>
                                                  <td class="w180" height="10" width="180"></td>
                                                </tr>
                                              </tbody>
                                            </table></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <img style="margin:0; padding:0;" src="/images/hr-image.jpg" width="580" height="8" alt="hr break" /> </layout>
                                </repeater></td>
                            </tr>
                            <tr>
                              <td class="w580" height="10" width="580"></td>
                            </tr>
                          </tbody>
                        </table>
                        <img  src="http://i6.createsend1.com/ti/r/C9/628/184/163754/images/hr-image.jpg" width="580" height="8" alt="hr break" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;outline-style:none;text-decoration:none;display:block;border-style:none;" />
                        <table class="w580"  border="0" cellpadding="0" cellspacing="0" width="580">
                          <tbody>
                            <tr>
                              <td colspan="2" height="15"></td>
                            </tr>
                            <tr>
                              <td><table width="580" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td><forwardtoafriend><img src="/images/forward-to-a-friend-img.jpg" width="211" height="75" alt="Forward to a friend" /></forwardtoafriend></td>
                                    <td><table title="links">
                                        <tr>
                                          <td><a href="http://www.walkingmaps.com.au/Home.action" target="_blank"><img src="/images/walkingmaps-link.jpg" cellpadding="0" cellspacing="0" width="280" height="17" alt="walkingmaps.org.au" longdesc="http://www.walkingmaps.com.au/Home.action" /></a></td>
                                        </tr>
                                        <tr>
                                          <td><a href="http://www.victoriawalks.org.au/" target="_blank"><img src="/images/victoriawalks-link.jpg" width="280" height="23" alt="www.victoriawalks.org.au" longdesc="http://www.victoriawalks.org.au/" /></a></td>
                                        </tr>
                                    </table></td>
                                  </tr>
                                  <tr>
                                    <td><table cellpadding="0" cellspacing="0" style="margin:0; padding:0; border-collapse:collapse;" class="footer-content-left" title="forward text">
                                        <tr>
                                          <td width="33" height="42"></td>
                                          <td valign="top" style="vertical-align:top; margin:0; padding:0;">Know someone who may be interested in this email? <span style="color:#009D97;">
                                            <forwardtoafriend>Forward it>></forwardtoafriend>
                                          </span></td>
                                          <td width="120"></td>
                                        </tr>
                                    </table></td>
                                    <td><table cellpadding="0" cellspacing="0">
                                        <tr>
                                          <td><a href="http://www.facebook.com/pages/Victoria-Walks-Official-Facebook/125998204092777" target="_blank"><img src="/images/facebook-link.jpg" width="281" height="52" alt="Find Victoria Walk" longdesc="http://www.facebook.com/pages/Victoria-Walks-Official-Facebook/125998204092777" /></a></td>
                                        </tr>
                                    </table></td>
                                  </tr>
                                  <tr>
                                    <td><table cellpadding="0" cellspacing="0" title="logos">
                                        <tr>
                                          <td height="20" colspan="2"></td>
                                        </tr>
                                        <tr>
                                          <td><a href="http://www.victoriawalks.org.au/" target="_blank"><img src="/images/victoriawalks-logo.jpg" width="138" height="93" alt="Victoria Walks logo" longdesc="http://www.victoriawalks.org.au/" /></a></td>
                                          <td><a href="http://www.vichealth.vic.gov.au/" target="_blank"><img src="/images/vichealth-logo.jpg" width="135" height="90" alt="VicHealth" longdesc="http://www.vichealth.vic.gov.au/" /></a></td>
                                        </tr>
                                    </table></td>
                                    <td><table cellpadding="0" cellspacing="0" class="footer-content-right" style="margin:0; padding:0;" title="forward text">
                                        <tr>
                                          <td width="15"></td>
                                          <td valign="top" style="vertical-align:top">Don't want to receive this email anymore? <span style="color:#009D97;">
                                            <unsubscribe>Unsubscribe</unsubscribe>
                                          </span></td>
                                          <td width="42"></td>
                                        </tr>
                                    </table></td>
                                  </tr>
                                </table></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td class="w15" width="15"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr id="simple-content-row">
              <td class="w640" bgcolor="#cfd91e" width="640" height="15"></td>
            </tr>
            <tr>
              <td class="w640" bgcolor="#ececec" height="15" width="640"></td>
            </tr>
            <tr>
              <td class="w640" width="640"><table id="footer" class="w640" bgcolor="#ececec" border="0" cellpadding="0" cellspacing="0" width="640">
                  <tr>
                    <td></td>
                  </tr>
                </table></td>
            </tr>
            <tr>
              <td class="w640" height="60" width="640"></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>

This should do the trick, but let me know if you have any q's :) Best of luck!


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

Hallelujah! That did it!! I did have a small issue which I'll add here in case anyone else has it - when trying to upload the template, I got one of those error messages saying the system couldn't find any editable regions, even though I could definitely see them in the code, and in the correct place. It turned out I had deleted the closing head tag, so once I fixed this, it all worked beautifully.
Thanks again for your amazing support!

roshodgekiss roshodgekiss, 4 years ago

Brilliant, Viv - so glad I could help out here! Thanks for sharing that fix as well. Have an awesome weekend ahead!


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