New Template Builder - Anomaly in Table Width Classes

I've started to use the New Template Builder, which is very good, but needed to modify the layouts a little, e.g., put the narrow column on the right-hand side of the 2-column layout.

I have noticed two anomalies/errors during manual code editing:

• Table cells <td> that use the class "w325" have a width of 350 whereas other "w" classes use the same numeric value, e.g., when class="w15" then width="15" but when class="w325" then width="350".

• The width of nested tables often does not add-up to 640px. The first nested table is set as class="w640" and width="640" but further down the nesting sub-tables may have cells whose total widths exceed 640px.

Both of these issues are present in the following example:

<tr>
    <td class="w15" width="15"></td>
    <td class="w325" width="350" valign="middle" align="left">...</td>
    <td class="w30" width="30"></td>
    <td class="w255" width="255" valign="middle" align="right">...</td>
    <td class="w15" width="15"></td>
</tr>

In the above table the total width is 15 + 350 + 30 + 255 + 15 = 665. Using the Inspector in Google Chrome the final rendered widths are 8 + 350 + 18 + 255 + 9 = 640.

Also, when rendered for the small screen the columns equate to 15 + 95 + 10 + 185 + 15 = 320. The w640 class makes the table and parent 400px so the final rendered widths are 18 + 118 + 12 + 233 + 19 = 400.

My CSS kung-fu isn't ninja-grade so hopefully I'm just missing something here else the template builder needs some tweaking.

roshodgekiss roshodgekiss, 5 years ago

Hi duerdenp, welcome to the forums. Our team had a bit of a discussion about this and you know, you got us :) It seems that all of us here are mathematically-challenged and let this one slip into the template builder - thanks for pointing this out!

That said, it well, uh, does still seems to work ;) I've noted this down internally as something we may fix in a future update - a huge thanks to you for being so eagle-eyed and doing the math where we obviously haven't!


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

Hi Ros, you're right, it does seem to work! If it helps with you internal discussions I made a test page that shows the different columns widths and what columns sensibly/logically fit into each. Not all possible combinations are included, that would get a bit silly! But at least it allows you to take a glance and say "Single column layout could 580px with 30px gutter each side" or "2-column 50/50 layout with 15px gutter and 10px space", e.g., 15-300-10-300-15. Any sub-column can then be divided by referencing that width, e.g., 300px can be broken into 10-280-10, etc.

Keep up the good work!

<html>
    <head>
        <title>beingHUMAN</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; }
            }
            td {font-family: "Arial Narrow"; font-size:8px; height:14px; border-bottom:1px solid #999;}
            td:nth-child(2n) {background: #CCC}

            /* 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: #FFFFFF; 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: #CCCCCC; }

            /* 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: #f2f2f2; color: #333333; }
            #top-bar a { font-weight: bold; color: #333333; 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: Georgia, Times New Roman, Times, 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: #333333; }
            .header-content a { font-weight: bold; color: #333333; text-decoration: none; }
            #headline p { color: #444444; 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: #444444; text-decoration: none; }
            #right-sidebar .toc-item { font-family: Georgia, Times New Roman, Times, serif; font-size: 12px; line-height: 16px; color: #000000; margin-top: 0px; margin-bottom: 6px; }
            #right-sidebar .toc-item a { color: #000000; text-decoration: none; }
            #right-sidebar .toc-heading { font-family: Georgia, Times New Roman, Times, serif; font-size: 11px; line-height: 15px; color:#777777; font-weight:bold; }
            #right-sidebar .toc-heading a { color: #777777; text-decoration: none; }
            #right-sidebar .right-column-heading { font-family: Georgia, Times New Roman, Times, serif; font-size: 11px; line-height:15px; color: #829C50; font-weight:bold; }
            #right-sidebar .right-column-heading a { color: #829C50; text-decoration:none; }
            #right-sidebar .right-column-subhead { font-family: Georgia, Times New Roman, Times, serif; font-size: 13px; line-height: 16px; color: #000000; font-weight: bold; margin-top: 0px; margin-bottom: 16px; }
            #right-sidebar .right-column-subhead a { color: #000000; text-decoration:none; }
            #right-sidebar .right-column-content { font-family: Georgia, Times New Roman, Times, serif; font-size: 12px; line-height: 16px; color: #666666; margin-top: 0px; margin-bottom: 16px; }
            #right-sidebar .right-column-content a { color: #000000; text-decoration: none; }
            .article-title { font-size: 18px; line-height:24px; color: #829C50; font-weight:bold; margin-top:0px; margin-bottom:18px; }
            .article-title a { color: #829C50; text-decoration: none; }
            .article-content { font-size: 13px; line-height: 18px; color: #666666; margin-top: 0px; margin-bottom: 18px; }
            .article-content a { color: #000000; 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: #666666; }
            .article-content li a { color: #000000; text-decoration:underline; }
            .article-content p {margin-bottom: 15px;}
            .footer-content-left { font-size: 12px; line-height: 15px; color: #000000; margin-top: 0px; margin-bottom: 15px; }
            .footer-content-left a { color: #000000; font-weight: bold; text-decoration: none; }
            .footer-content-right { font-size: 11px; line-height: 16px; color: #000000; margin-top: 0px; margin-bottom: 15px; }
            .footer-content-right a { color: #000000; font-weight: bold; text-decoration: none; }
            #footer { background-color: #ffffff; color: #000000; }
            #footer a { color: #000000; text-decoration: none; font-weight: bold; }
            #permission-reminder { white-space: pre-wrap; }
            #street-address { color: #829C50; white-space: pre-wrap; }
        </style>
        <!--[if gte mso 9]>
        <style _tmplitem="2366" >
            .article-content ol, .article-content ul {
                margin: 0 0 0 24px;
                padding: 0;
                list-style-position: inside;
            }
        </style>
        <![endif]-->
        </head>
    <body>
        <table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
            <tbody>
                <tr>
                    <td align="center" bgcolor="#999">
                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                            <tbody>
                                <tr>
                                    <td class="w640" width="640" align="left">
                                        <br />
                                        
                                        <strong>10</strong>
                                        <table class="w10" width="10" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>15</strong>
                                        <table class="w15" width="15" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>30</strong>
                                        <table class="w30" width="30" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w30" width="30" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w30" width="30" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>60</strong>
                                        <table class="w60" width="60" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w60" width="60" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>125</strong>
                                        <table class="w125" width="125" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w125" width="125" bgcolor="#FFFFFF">125</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w125" width="125" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>130</strong>
                                        <table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w130" width="130" bgcolor="#FFFFFF">130</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>140</strong>
                                        <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w140" width="140" bgcolor="#FFFFFF">140</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w140" width="140" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w130" width="130" bgcolor="#FFFFFF">130</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>160</strong>
                                        <table class="w160" width="160" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w160" width="160" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w140" width="140" bgcolor="#FFFFFF">140</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w160" width="160" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w130" width="130" bgcolor="#FFFFFF">130</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>170</strong>
                                        <table class="w170" width="170" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w170" width="170" bgcolor="#FFFFFF">170</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w170" width="170" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>180</strong>
                                        <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w180" width="180" bgcolor="#FFFFFF">180</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w170" width="170" bgcolor="#FFFFFF">170</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w140" width="140" bgcolor="#FFFFFF">140</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w130" width="130" bgcolor="#FFFFFF">130</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w125" width="125" bgcolor="#FFFFFF">125</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>195</strong>
                                        <table class="w195" width="195" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w195" width="195" bgcolor="#FFFFFF">195</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w195" width="195" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w180" width="180" bgcolor="#FFFFFF">180</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>220</strong>
                                        <table class="w220" width="220" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w220" width="220" bgcolor="#FFFFFF">220</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w220" width="220" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w195" width="195" bgcolor="#FFFFFF">195</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w220" width="220" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>240</strong>
                                        <table class="w240" width="240" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w240" width="240" bgcolor="#FFFFFF">240</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w240" width="240" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w220" width="220" bgcolor="#FFFFFF">220</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w240" width="240" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w195" width="195" bgcolor="#FFFFFF">195</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w240" width="240" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w180" width="180" bgcolor="#FFFFFF">180</td>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>255</strong>
                                        <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w255" width="255" bgcolor="#FFFFFF">255</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w240" width="240" bgcolor="#FFFFFF">240</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>275</strong>
                                        <table class="w275" width="275" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w275" width="275" bgcolor="#FFFFFF">275</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w275" width="275" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w255" width="255" bgcolor="#FFFFFF">255</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>280</strong>
                                        <table class="w280" width="280" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w280" width="280" bgcolor="#FFFFFF">280</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w280" width="280" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w255" width="255" bgcolor="#FFFFFF">255</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>300</strong>
                                        <table class="w300" width="300" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w300" width="300" bgcolor="#FFFFFF">300</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w300" width="300" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w280" width="280" bgcolor="#FFFFFF">280</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w300" width="300" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w275" width="275" bgcolor="#FFFFFF">275</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w300" width="300" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w240" width="240" bgcolor="#FFFFFF">240</td>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>325</strong>
                                        <table class="w325" width="325" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w325" width="325" bgcolor="#FFFFFF">325</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w325" width="325" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w300" width="300" bgcolor="#FFFFFF">300</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    
                                        
                                        <strong>360</strong>
                                        <table class="w360" width="360" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w360" width="360" bgcolor="#FFFFFF">360</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w360" width="360" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w300" width="300" bgcolor="#FFFFFF">300</td>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                        
                                        
                                        <strong>410</strong>
                                        <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w410" width="410" bgcolor="#FFFFFF">410</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w360" width="360" bgcolor="#FFFFFF">360</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w410" width="410" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w195" width="195" bgcolor="#FFFFFF">195</td>
                                                    <td class="w195" width="195" bgcolor="#FFFFFF">195</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                        
                                        
                                        <strong>470</strong>
                                        <table class="w470" width="470" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w470" width="470" bgcolor="#FFFFFF">470</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w470" width="470" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w410" width="410" bgcolor="#FFFFFF">410</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                        
                                        
                                        <strong>580</strong>
                                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w580" width="580" bgcolor="#FFFFFF">580</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w470" width="470" bgcolor="#FFFFFF">470</td>
                                                    <td class="w60" width="60" bgcolor="#FFFFFF">60</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                        
                                        
                                        <strong>640</strong>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w640" width="640" bgcolor="#FFFFFF">640</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w580" width="580" bgcolor="#FFFFFF">580</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                    <td class="w30" width="30" bgcolor="#FFFFFF">30</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w470" width="470" bgcolor="#FFFFFF">470</td>
                                                    <td class="w170" width="170" bgcolor="#FFFFFF">170</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w410" width="410" bgcolor="#FFFFFF">410</td>
                                                    <td class="w220" width="220" bgcolor="#FFFFFF">220</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w360" width="360" bgcolor="#FFFFFF">360</td>
                                                    <td class="w280" width="280" bgcolor="#FFFFFF">280</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w325" width="325" bgcolor="#FFFFFF">325</td>
                                                    <td class="w300" width="300" bgcolor="#FFFFFF">300</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w300" width="300" bgcolor="#FFFFFF">300</td>
                                                    <td class="w300" width="300" bgcolor="#FFFFFF">300</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w15" width="15" bgcolor="#FFFFFF">15</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w240" width="240" bgcolor="#FFFFFF">240</td>
                                                    <td class="w240" width="240" bgcolor="#FFFFFF">240</td>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w240" width="240" bgcolor="#FFFFFF">240</td>
                                                    <td class="w195" width="195" bgcolor="#FFFFFF">195</td>
                                                    <td class="w195" width="195" bgcolor="#FFFFFF">195</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w220" width="220" bgcolor="#FFFFFF">220</td>
                                                    <td class="w220" width="220" bgcolor="#FFFFFF">220</td>
                                                    <td class="w180" width="180" bgcolor="#FFFFFF">180</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                    <td class="w10" width="10" bgcolor="#FFFFFF">10</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                    <td class="w160" width="160" bgcolor="#FFFFFF">160</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                        
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Ah perfect, this does help a stack! We spoke to our designers about it yesterday, so we'll add this to our notes and revisit when we next look at improving the templates. Thank you for your help - you're a champion!


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

I've also noticed another small problem with the new Template Builder. Because of the way Yahoo! Mail genuinely butchers the HTML mark-up in your painstakingly crafted template it causes any element that should only be hidden when viewed on a mobile device (using class="hide") to be hidden on the desktop too!

For example, the following snippet from my footer:

<td class="w0 hide" width="510" align="right" style="border-collapse:collapse;" >

is converted to this:

<td class="yiv1988001647w0 yiv1988001647hide" width="510" align="right" style="border-collapse:collapse;">

but because the

@media only screen and (max-device-width:480px)

had been removed the new yiv1988001647hide class is applied when viewed on the desktop webmail version of Yahoo! Mail.

{sigh}

roshodgekiss roshodgekiss, 5 years ago

Thanks for this heads up, duerdenp! I've also noticed that we've slipped .hide into our @media query - there's a good chance that Yahoo! Mail is reading this, thanks to Yahoo!'s mobile version bug. I've noted this as something we should look into internally - it really doesn't help that Yahoo! Mail plays silly games with our HTML code :P


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