Formatting Problem With Template Designer

I use the new template design tool.  Preview mode and view with web browser works fine but when viewed in Outlook the page goes from 640px to 660px.

Here is the index.php for the template and thanks in advance for any help!

<html><head><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; }
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: blue !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {    color: red !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: purple !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. */
#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: #213C73; color: #e7cba3; }
#top-bar a { font-weight: bold; color: #e7cba3; 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: #e7cba3; }
.header-content a { font-weight: bold; color: #e7cba3; text-decoration: none; }
#headline p { color: #e7cba3; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #e7cba3; text-decoration: none; }
#left-sidebar .toc-item { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; color: #45373c; margin-top: 0px; margin-bottom: 6px; }
#left-sidebar .toc-item a { color: #45373c; text-decoration: none; }
#left-sidebar .toc-heading { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px; color:#213C73; font-weight:bold; border-bottom-style:solid; border-bottom-width:thin; border-bottom-color:#C6CDC9; }
#left-sidebar .toc-heading a { color: #213C73; text-decoration: none; }
#left-sidebar .left-column-heading { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 11px; line-height:15px; color: #213C73; font-weight:bold; border-bottom-style:solid; border-bottom-width:thin; border-bottom-color:#C6CDC9; }
#left-sidebar .left-column-heading a { color: #213C73; text-decoration:none; }
#left-sidebar .left-column-subhead { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; color: #4f4f4a; font-weight: bold; margin-top: 0px; margin-bottom: 10px; }
#left-sidebar .left-column-subhead a { color: #4f4f4a; text-decoration:none; }
#left-sidebar .left-column-content { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; color: #4f4f4a; margin-top: 0px; margin-bottom: 16px; }
#left-sidebar .left-column-content a { color: #45373c; text-decoration: none; }
.article-title { font-size: 18px; line-height:18px; color: #94937f; font-weight:bold; margin-top:0px; margin-bottom:10px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.article-title a { color: #94937f; text-decoration: none; }
.article-content { font-size: 13px; line-height: 18px; color: #444444; margin-top: 0px; margin-bottom: 18px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
.article-content a { color: #660000; font-weight:bold; text-decoration:none; }
.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: #660000; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #e2e2e2; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #e7cba3; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #e2e2e2; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #e7cba3; font-weight: bold; text-decoration: none; }
#footer { background-color: #213C73; color: #e2e2e2; }
#footer a { color: #e7cba3; text-decoration: none; font-weight: bold; }
#permission-reminder { white-space: pre-wrap; }
#street-address { color: #e7cba3; white-space: pre-wrap; }
.date {font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#e7cba3; padding-left:26px; padding-top:6px; padding-bottom:6px;}
</style>
<!--[if gte mso 9]>
<style _tmplitem="50" >
.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="#ffffff" 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"><webversion>Web version</webversion><span class="hide">&nbsp;&nbsp;|&nbsp; <preferences>Update preferences</preferences>&nbsp;&nbsp;|&nbsp; <unsubscribe>Unsubscribe</unsubscribe></span></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="/images/facebook.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.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/email.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">
    
    <div style="text-align: center;" align="center"><img editable="true" width="640" label='Banner Image' src="/csimport/default_banner_3.jpg"></div>
    
    
</td>
                </tr>
                <tr>
                  <td id="header" class="w640" align="center" bgcolor="#ffffff"><img editable="true" width="640" label='Change Image' src="/csimport/kitchen_4.jpg"></td>
                </tr>
                <tr>
                  <td align="left" valign="middle" bgcolor="#19305B" class="date" id="header2">Newsletter Date:&nbsp;&nbsp;&nbsp; <currentmonthname> <currentday>, <currentyear></td>

                </tr>
                
                <tr id="twocolumn-content-row"><td class="w640" width="640"><table class="w640" border="0" cellpadding="0" cellspacing="0" width="640">
    <tbody><tr>
        <td class="w15" bgcolor="#e2e2e2" width="15"></td>
        <td id="left-sidebar" class="w140" align="left" bgcolor="#e2e2e2" valign="top" width="140">
            
            <table class="w140" border="0" cellpadding="0" cellspacing="0" width="140">
                <tbody><tr><td class="w140" height="30" width="140"></td></tr>
                <tr>
                    <td class="w140" width="140">

                        <p class="toc-heading" align="left">IN THIS ISSUE</p>
                        <tableofcontents>
                            <table border="0" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                    <td width="3"></td>
                                    <td valign="top"><p class="toc-item" align="left">•</p></td>
                                    <td width="6"></td>
                                    <td valign="top"><p class="toc-item" align="left"><strong><repeatertitle></strong></p></td>

                                </tr>
                            </tbody></table>
                        </tableofcontents>
                    </td>
                </tr>
                <tr><td class="w140" height="15" width="140"></td></tr>
            </tbody></table>
            
            
            <table class="w140" border="0" cellpadding="0" cellspacing="0" width="140">
                <tbody><tr><td class="w140" height="15" width="140"></td></tr>

                <tr>
                    <td class="w140" width="140">
                        <div class="left-column-heading" align="left"><singleline label="Title">IN OTHER NEWS</singleline></div>
                    </td>
                </tr>
            </tbody></table>
                                
            <repeater>    
                <layout label="Text only">
                    <table class="w140" border="0" cellpadding="0" cellspacing="0" width="140">

                        <tbody><tr><td class="w140" height="15" width="140"></td></tr>
                        <tr>
                            <td class="w140" width="140">
                                <p class="left-column-subhead" align="left"><singleline label="Title">Add a title</singleline></p>
                                <div class="left-column-content" align="left"><multiline label="Description">Enter your description</multiline></div>
                            </td>
                        </tr>
                    </tbody></table>

                </layout>
                                    
                <layout label="Text with image">
                    <table class="w140" border="0" cellpadding="0" cellspacing="0" width="140">
                        <tbody><tr><td class="w140" height="15" width="140"></td></tr>
                        <tr>
                            <td class="w140" width="140"><p class="left-column-subhead" align="left"><singleline label="Title">Add a title</singleline></p></td>
                        </tr>
                        <tr>

                            <td class="w140" width="140"><img editable="true" label="Image" class="w140" border="0" width="140"></td>
                        </tr>
                        <tr><td class="w140" height="15" width="140"></td></tr>
                        <tr>
                            <td class="w140" width="140"><div class="left-column-content" align="left"><multiline label="Description">Enter your description</multiline></div></td>
                        </tr>
                    </tbody></table>
                </layout>

            </repeater>
            
        </td>
        <td class="w15" bgcolor="#e2e2e2" width="15"></td>
        <td class="w470" bgcolor="#ffffff" valign="top" width="470">
            <table class="w470" border="0" cellpadding="0" cellspacing="0" width="470">
                <tbody><tr><td class="w470" height="30" width="470"></td></tr>
            </tbody></table>
            <table class="w470" border="0" cellpadding="0" cellspacing="0" width="470">
                <tbody><tr>

                    <td class="w30" width="30"></td>
                    <td class="w410" width="410">
                        <repeater>
                                                
                            
                            <layout label="Text only">
                                <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p class="article-title" align="left"><singleline repeatertitle="true" label="Article 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="w410" height="10" width="410"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                            
                            <layout label="Text with full-width image">
                                <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">

                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p class="article-title" align="left"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="w410" width="410"><img editable="true" label="Image" class="w410" border="0" width="410"></td>
                                    </tr>

                                    <tr><td class="w410" height="15" width="410"></td></tr>
                                    <tr>
                                        <td class="w410" width="410">
                                            <div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div>
                                        </td>
                                    </tr>
                                    <tr><td class="w410" height="10" width="410"></td></tr>
                                </tbody></table>

                            </layout>
                                                
                            
                            <layout label="Text with right-aligned image">
                                <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p class="article-title" align="left"><singleline repeatertitle="true" label="Article 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="w220" border="0" width="220"></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="w410" height="10" width="410"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                            
                            <layout label="Text with left-aligned image">
                                <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">
                                    <tbody><tr>
                                        <td class="w410" width="410">
                                            <p class="article-title" align="left"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>

                                            <table align="left" border="0" cellpadding="0" cellspacing="0">
                                                <tbody><tr>
                                                    <td><img editable="true" label="Image" class="w220" border="0" width="220"></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="w410" height="10" width="410"></td></tr>
                                </tbody></table>
                            </layout>
                                                
                                                
                            
                            <layout label="Image gallery">
                                <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">
                                    <tbody><tr>
                                        <td class="w195" valign="top" width="195">

                                            <table class="w195" border="0" cellpadding="0" cellspacing="0" width="195">
                                                <tbody><tr>
                                                    <td class="w195" width="195"><img editable="true" label="Image" class="w195" border="0" width="195"></td>
                                                </tr>
                                                <tr><td class="w195" height="10" width="195"></td></tr>
                                                <tr>
                                                    <td class="w195" width="195">
                                                        <div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div>

                                                    </td>
                                                </tr>
                                                <tr><td class="w195" height="10" width="195"></td></tr>
                                            </tbody></table>
                                        </td>
                                        <td width="20"></td>
                                        <td class="w195" valign="top" width="195">
                                            <table class="w195" border="0" cellpadding="0" cellspacing="0" width="195">
                                                <tbody><tr>

                                                    <td class="w195" width="195"><img editable="true" label="Image" class="w195" border="0" width="195"></td>
                                                </tr>
                                                <tr><td class="w195" height="10" width="195"></td></tr>
                                                <tr>
                                                    <td class="w195" width="195">
                                                        <div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div>
                                                    </td>
                                                </tr>

                                                <tr><td class="w195" height="10" width="195"></td></tr>
                                            </tbody></table>
                                        </td>
                                    </tr>
                                </tbody></table>
                            </layout>
                        </repeater>
                    </td>
                    <td class="w30" width="30"></td>

                </tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table>
</td></tr>
                <tr>
                    <td class="w640" width="640"><table class="w640" border="0" cellpadding="0" cellspacing="0" width="640">
                        <tbody><tr>
                            <td class="w170" bgcolor="#e2e2e2" height="15" width="170"></td>

                            <td class="w470" bgcolor="#ffffff" height="15" width="470"></td>
                        </tr>
                       </tbody></table></td>
                </tr>
                
                <tr>
                <td class="w640" width="640">
    <table id="footer" class="w640" bgcolor="#213C73" border="0" cellpadding="0" cellspacing="0" width="640">
    <tbody>
        <tr>

            <td width="640" align="center" valign="top" class="w580">
            <span class="hide"><p id="permission-reminder" class="footer-content-left" align="center" style="padding-top:15px; ">12810 NE 178th St. - Ste. 104 - Woodinville, WA 98072 - 425.483.0999</p></span>
            <p class="footer-content-left" align="center"><preferences>Edit your subscription</preferences> | <unsubscribe>Unsubscribe instantly</unsubscribe></p>
            </td>
        </tr>
    </tbody></table>

</td>
                </tr>
                <tr><td class="w640" height="60" width="640"></td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table></body></html>
torweb, 4 years ago

It seems it's just outlook that is adding extra space adding extra space and making the body wider than 640px...help!

torweb, 4 years ago

I've tested several times using Litmus and think I've found a Bug in the Template Design tool.  The problem happens when the content in the left sidebar is longer than the content on the main page.

Here is a link to the samples with the left sidebar too long:
Broken

Here is a link to the samples with the left sidebar shorter:
Working

Is this a bug?

roshodgekiss roshodgekiss, 4 years ago

Hi torweb, the issue is not so much the length of the left-hand sidebar, as something in the final para in the left-hand column. See how it pushes out the column width:

https://img.skitch.com/20120105-mciqd3jt7868w56fem284m3rbh.png

Could you kindly double-check that there aren't any extra &nbsp; in the pasted text that are forcing the content to go wide? You may have to view the source in the email editor to view this.

Thanks, torweb - we're happy to look into this further if it's a potential bug, but if the only difference in the examples above is that final para, then for now I feel this may be the cause. All the best!


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

Fantastic...I missed that.  Let me dig into this and see what's happening...thanks again!

torweb, 4 years ago

I just opened Dreamweaver and pasted is some "Lorem ipsum" - about a paragraph worth.  I copied that and placed it in my newsletter template and now it formats properly.  I then pasted the original para into Dreamweaver and copied via html...But I did remove the exclamation she had and now it formats properly???

Could this be the problem?  It seems I could reproduce it.

Thanks

roshodgekiss roshodgekiss, 4 years ago

Yes, something is definitely getting carried over when pasting the text into the editor - there is the possibility that 'rich text' is pulling some additional formatting in, unintentionally. Mind me asking, but which browser are you working in? We'd be curious to look into this further.


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