Outlook ignoring td width on right-hand side only

Hi Guys,


I posted about this a week or two ago, I can't get to the bottom of it.

Here is the code (including all the stuff from the html boilerplate, I had to quickly knock this up this evening so if you would prefer a streamlined version to test, let me know and I will post one up in the morning)

The td's on the right hand side seem to move out by about 3-5 pixels,  in outlook 2007/2010/2013. It is really strange because the left side is identical, just a different order of colors.

I would really appreciate anyone's help as this had to be recreated in the end using images, which completely took away the expand-ability purpose of the design.

Cheers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Your Message Subject or Title</title>
    <style type="text/css">
        /* Based on The MailChimp Reset INLINE: Yes. */  
        /* Client-specific Styles */
        #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
        body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} 
        /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/ 
        .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */  
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
        /* Forces Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */ 
        #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
        /* End reset */

        /* Some sensible defaults for images
        Bring inline: Yes. */
        img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
        a img {border:none;} 
        .image_fix {display:block;}

        /* Yahoo paragraph fix
        Bring inline: Yes. */
        p {margin: 1em 0;}

        /* Hotmail header color reset
        Bring inline: Yes. */
        h1, h2, h3, h4, h5, h6 {color: black !important;}

        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. */
        }

        /* Outlook 07, 10 Padding issue fix
        Bring inline: No.*/
        table td {border-collapse: collapse;}

        /* Remove spacing around Outlook 07, 10 tables
        Bring inline: Yes */
        table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

        /* Styling your links has become much simpler with the new Yahoo.  In fact, it falls in line with the main credo of styling in email and make sure to bring your styles inline.  Your link colors will be uniform across clients when brought inline.
        Bring inline: Yes. */
        a {color: orange;}


        /***************************************************
        ****************************************************
        MOBILE TARGETING
        ****************************************************
        ***************************************************/
        @media only screen and (max-device-width: 480px) {
            /* Part one of controlling phone number linking for mobile. */
            a[href^="tel"], a[href^="sms"] {
                        text-decoration: none;
                        color: blue; /* or whatever your want */
                        pointer-events: none;
                        cursor: default;
                    }

            .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
                        text-decoration: default;
                        color: orange !important;
                        pointer-events: auto;
                        cursor: default;
                    }

        }

        /* More Specific Targeting */

        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        /* You guessed it, ipad (tablets, smaller screens, etc) */
            /* repeating for the ipad */
            a[href^="tel"], a[href^="sms"] {
                        text-decoration: none;
                        color: blue; /* or whatever your want */
                        pointer-events: none;
                        cursor: default;
                    }

            .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
                        text-decoration: default;
                        color: orange !important;
                        pointer-events: auto;
                        cursor: default;
                    }
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        /* Put your iPhone 4g styles in here */ 
        }

        /* Android targeting */
        @media only screen and (-webkit-device-pixel-ratio:.75){
        /* Put CSS for low density (ldpi) Android layouts in here */
        }
        @media only screen and (-webkit-device-pixel-ratio:1){
        /* Put CSS for medium density (mdpi) Android layouts in here */
        }
        @media only screen and (-webkit-device-pixel-ratio:1.5){
        /* Put CSS for high density (hdpi) Android layouts in here */
        }
        /* end Android targeting */

    </style>

    <!-- Targeting Windows Mobile -->
    <!--[if IEMobile 7]>
    <style type="text/css">
    
    </style>
    <![endif]-->   

    <!-- ***********************************************
    ****************************************************
    END MOBILE TARGETING
    ****************************************************
    ************************************************ -->

    <!--[if gte mso 9]>
        <style>
        /* Target Outlook 2007 and 2010 */
        </style>
    <![endif]-->
</head>
<body>
<!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
    <tr>
        <td valign="top"> 
        <!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message. -->
        <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
            <td width="600" height="30" valign="middle" style="font-family:arial,verdana,sans-serif;font-size:10px;line-height:13px;color:#363538;text-align:center;">
        TEXT HERE
        </td>
        </tr>
    </table>
    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
            <td width="600"><a href="TBC" target="_blank"><img src="http://s22.postimg.org/wg5mpnjc1/top.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="27" alt="IMG HERE" title="IMG HERE" border="0"></a></td>
        </tr>
    </table>
    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
            <td width="1" bgcolor="#ac8f78" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#ac907a" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#a98e75" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#a98e72" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#ae9274" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#ae9171" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#b09578" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#ae8f72" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#ab8e73" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#a98c74" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#a58870" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#a18670" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#977c67" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#82654b" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#8e7255" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td> 
        <td width="1" bgcolor="#96816c" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#928069" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#94826b" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#93826e" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#8e7f6d" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#8b7b6b" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#877765" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#857767" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#817262" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#7b6d5d" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#756658" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#6f6153" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#6b5f51" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#655b4d" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#5f5548" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#cccccc" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#eeeeee" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="536">
          <table width="536" cellpadding="0" cellspacing="0" border="0" align="center">
              <tr>
                  <td width="37"></td>
              <td width="408" height="400" valign="top" style="font-family:arial,verdana,sans-serif;font-size:12px;line-height:20px;color:#4f4d52;text-align:left;">
              <table width="408" cellpadding="0" cellspacing="0" border="0" align="center">
                  <tr>
                      <td width="408" style="font-family:arial,verdana,sans-serif;font-size:17px;line-height:20px;color:#4f2d7f;font-weight:bold;">
                    <img src="TBC.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="408" height="32" alt="TITLE IMG HERE" title="TITLE IMG HERE" border="0">
                  </td>
                  </tr>
              </table>
              <table width="408" cellpadding="0" cellspacing="0" border="0" align="center">
                <tr>
                  <td width="408" style="font-family:arial,verdana,sans-serif;font-size:12px;line-height:18px;color:#4f4d52;text-align:center;">
                  COPY HERE
                  </td>
                </tr>
              </table>
              </td>
              <td width="91" valign="top"><img src="TBC.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="91" height="212" border="0" alt="IMG HERE" title="IMG HERE"></td>
              </tr>
          </table>
          <table width="536" cellpadding="0" cellspacing="0" border="0" align="center">
              <tr>
                  <td width="37"></td>
              <td width="460" height="2" bgcolor="#dfd8d5"></td>
              <td width="39"></td>
              </tr>
          </table>
          <table width="536" cellpadding="0" cellspacing="0" border="0" align="center">
            <tr>
              <td width="536" valign="top" style="font-family:arial,verdana,sans-serif;font-size:12px;line-height:18px;color:#4f4d52;text-align:center;">
              <table width="536" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td width="536" height="10" style="font-size:0px;line-height:0px;">&nbsp;</td></tr></table>
              <i>TEXT HERE</i>
              </td>
            </tr>
          </table>
        </td>
        <td width="1" bgcolor="#eeeeee" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#cccccc" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#5b4b39" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#61513f" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#675646" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#695543" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#705c46" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#76634c" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#7c674c" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#7e6851" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#684f3a" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#6b4c2f" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#81654b" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#826b53" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#856b52" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#876b52" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#866a4e" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#896a4f" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td> 
        <td width="1" bgcolor="#8b6d50" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#8b6e52" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#8d6d51" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td> 
        <td width="1" bgcolor="#8f7054" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#957656" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td> 
        <td width="1" bgcolor="#997759" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#997656" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#9a7859" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td> 
        <td width="1" bgcolor="#987657" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#967250" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#937050" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#926e4d" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#916e4f" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        <td width="1" bgcolor="#977353" style="font-size:1px; line-height:0; -webkit-text-size-adjust:none"><div style="display:none;">&#8203;</div></td>
        </tr>
    </table>
    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
            <td width="600"><img src="http://s22.postimg.org/wg5mpnjc1/top.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="27" alt="FOOTER IMG HERE" title="FOOTER IMG HERE" border="0"></td>
        </tr>
    </table>
        <!-- End example table -->

        </td>
    </tr>
</table>  
<!-- End of wrapper table -->
</body>
</html>
JohnP JohnP, 3 years ago

Is it possible that your images are pushing the containing tables wider?

Try:

<img style="margin: 0; border: 0; padding: 0; display: block;"...

Only other thing I can think of is to put the 'COPY HERE' text into its own td. May be nothing but worth removing from the equation when troubleshooting...

It is probably good practice not to mix block elements (tables) with inline elements (best to give everything it's own row/cell).

jimmenycricket jimmenycricket, 3 years ago

Thanks for your reply John, I put the 'COPY HERE' text back in its own table and added those reset style to all the img tags, no luck unfortunately :(

I have updated the code and here is a screen shot to show exactly what happens in outlook 2007/2010/2013

http://s12.postimg.org/bslrzlgf1/litmus_screengrab.jpg


Get in touch for any freelance work!
JohnP JohnP, 3 years ago

Try putting nbsp's in your center panel empty table cells, see if that makes a difference. I'm just making guesses though without testing myself.

It looks like the issue is with the center panel, so remove each nested table (start with the one with the 2 images) and start bringing stuff back until it breaks. This should quickly identify which of them is pushing your 536px center section wider than intended. If you repeat this process and keep selectively narrowing your search, you will eventually find the exact issue.

jimmenycricket jimmenycricket, 3 years ago

jeeeeeese i cannot figure this one out!! I've stripped it down to its most basic now and its still doing the same!

Any more ideas??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Your Message Subject or Title</title>
    <style type="text/css">
        #outlook a {padding:0;}
        body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} 
        .ExternalClass {width:100%;}
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
        #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
        img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
        a img {border:none;} 
        .image_fix {display:block;}
        p {margin: 1em 0;}
        h1, h2, h3, h4, h5, h6 {color: black !important;}
        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; 
        }
        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 {border-collapse: collapse;}
        table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
        a {color: orange;}
        
        @media only screen and (max-device-width: 480px) {
            a[href^="tel"], a[href^="sms"] {
                        text-decoration: none;
                        color: blue; /* or whatever your want */
                        pointer-events: none;
                        cursor: default;
                    }

            .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
                        text-decoration: default;
                        color: orange !important;
                        pointer-events: auto;
                        cursor: default;
                    }

        }
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
            a[href^="tel"], a[href^="sms"] {
                        text-decoration: none;
                        color: blue; /* or whatever your want */
                        pointer-events: none;
                        cursor: default;
                    }

            .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
                        text-decoration: default;
                        color: orange !important;
                        pointer-events: auto;
                        cursor: default;
                    }
        }
    </style>
</head>
<body>
<!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
    <tr>
        <td valign="top"> 
        <!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message. -->
        <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
            <td width="600" height="30" valign="middle" style="font-family:arial,verdana,sans-serif;font-size:10px;line-height:13px;color:#363538;text-align:center;">
        TEXT HERE
        </td>
        </tr>
    </table>
    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
            <td width="600"><a href="TBC" target="_blank"><img src="http://s22.postimg.org/wg5mpnjc1/top.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="27" alt="IMG HERE" title="IMG HERE" border="0" /></a></td>
        </tr>
    </table>
    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
      <tr>
        <td width="1" bgcolor="#ac8f78"></td>
        <td width="1" bgcolor="#ac907a"></td>
        <td width="1" bgcolor="#a98e75"></td>
        <td width="1" bgcolor="#a98e72"></td>
        <td width="1" bgcolor="#ae9274"></td>
        <td width="1" bgcolor="#ae9171"></td>
        <td width="1" bgcolor="#b09578"></td>
        <td width="1" bgcolor="#ae8f72"></td>
        <td width="1" bgcolor="#ab8e73"></td>
        <td width="1" bgcolor="#a98c74"></td>
        <td width="1" bgcolor="#a58870"></td>
        <td width="1" bgcolor="#a18670"></td>
        <td width="1" bgcolor="#977c67"></td>
        <td width="1" bgcolor="#82654b"></td>
        <td width="1" bgcolor="#8e7255"></td> 
        <td width="1" bgcolor="#96816c"></td>
        <td width="1" bgcolor="#928069"></td>
        <td width="1" bgcolor="#94826b"></td>
        <td width="1" bgcolor="#93826e"></td>
        <td width="1" bgcolor="#8e7f6d"></td>
        <td width="1" bgcolor="#8b7b6b"></td>
        <td width="1" bgcolor="#877765"></td>
        <td width="1" bgcolor="#857767"></td>
        <td width="1" bgcolor="#817262"></td>
        <td width="1" bgcolor="#7b6d5d"></td>
        <td width="1" bgcolor="#756658"></td>
        <td width="1" bgcolor="#6f6153"></td>
        <td width="1" bgcolor="#6b5f51"></td>
        <td width="1" bgcolor="#655b4d"></td>
        <td width="1" bgcolor="#5f5548"></td>
        <td width="1" bgcolor="#cccccc"></td>
        <td width="1" bgcolor="#eeeeee"></td>
        <td width="536">
          <table width="536" cellpadding="0" cellspacing="0" border="0" align="center">
            <tr>
              <td width="37"></td>
              <td width="408" height="400" valign="top" style="font-family:arial,verdana,sans-serif;font-size:12px;line-height:20px;color:#4f4d52;text-align:left;">
              <table width="408" cellpadding="0" cellspacing="0" border="0" align="center">
                <tr>
                  <td width="408" style="font-family:arial,verdana,sans-serif;font-size:12px;line-height:18px;color:#4f4d52;text-align:center;">
                  COPY HERE
                  </td>
                </tr>
              </table>
              </td>
              <td width="91" valign="top"></td>
              </tr>
          </table>
        </td>
        <td width="1" bgcolor="#eeeeee"></td>
        <td width="1" bgcolor="#cccccc"></td>
        <td width="1" bgcolor="#5b4b39"></td>
        <td width="1" bgcolor="#61513f"></td>
        <td width="1" bgcolor="#675646"></td>
        <td width="1" bgcolor="#695543"></td>
        <td width="1" bgcolor="#705c46"></td>
        <td width="1" bgcolor="#76634c"></td>
        <td width="1" bgcolor="#7c674c"></td>
        <td width="1" bgcolor="#7e6851"></td>
        <td width="1" bgcolor="#684f3a"></td>
        <td width="1" bgcolor="#6b4c2f"></td>
        <td width="1" bgcolor="#81654b"></td>
        <td width="1" bgcolor="#826b53"></td>
        <td width="1" bgcolor="#856b52"></td>
        <td width="1" bgcolor="#876b52"></td>
        <td width="1" bgcolor="#866a4e"></td>
        <td width="1" bgcolor="#896a4f"></td> 
        <td width="1" bgcolor="#8b6d50"></td>
        <td width="1" bgcolor="#8b6e52"></td>
        <td width="1" bgcolor="#8d6d51"></td> 
        <td width="1" bgcolor="#8f7054"></td>
        <td width="1" bgcolor="#957656"></td> 
        <td width="1" bgcolor="#997759"></td>
        <td width="1" bgcolor="#997656"></td>
        <td width="1" bgcolor="#9a7859"></td> 
        <td width="1" bgcolor="#987657"></td>
        <td width="1" bgcolor="#967250"></td>
        <td width="1" bgcolor="#937050"></td>
        <td width="1" bgcolor="#926e4d"></td>
        <td width="1" bgcolor="#916e4f"></td>
        <td width="1" bgcolor="#977353"></td>
      </tr>
    </table>
    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
            <td width="600"><img src="http://s22.postimg.org/wg5mpnjc1/top.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="27" alt="FOOTER IMG HERE" title="FOOTER IMG HERE" border="0" /></td>
        </tr>
    </table>
        <!-- End example table -->

        </td>
    </tr>
</table>  
<!-- End of wrapper table -->
</body>
</html>

Get in touch for any freelance work!
jimmenycricket jimmenycricket, 3 years ago

http://s17.postimg.org/613t7idz3/outlook_2010.jpg


Get in touch for any freelance work!
leinverheij, 3 years ago

Why don't you remove the header en footer image and create the coloured sides with just tds? That way you don't have to worry about the images not aligning with the tds.

JohnP JohnP, 3 years ago

I couldn't figure it out either, so sometimes it is just easier to start fresh - This seems to work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">           
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
    <td width="600" colspan="65">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="http://s22.postimg.org/wg5mpnjc1/top.jpg" width="600" height="27" alt="">
    </td>
  </tr>
  <tr>
    <td width="1" bgcolor="#ac8f78">&#8203;</td>
    <td width="1" bgcolor="#ac907a">&#8203;</td>
    <td width="1" bgcolor="#a98e75">&#8203;</td>
    <td width="1" bgcolor="#a98e72">&#8203;</td>
    <td width="1" bgcolor="#ae9274">&#8203;</td>
    <td width="1" bgcolor="#ae9171">&#8203;</td>
    <td width="1" bgcolor="#b09578">&#8203;</td>
    <td width="1" bgcolor="#ae8f72">&#8203;</td>
    <td width="1" bgcolor="#ab8e73">&#8203;</td>
    <td width="1" bgcolor="#a98c74">&#8203;</td>
    <td width="1" bgcolor="#a58870">&#8203;</td>
    <td width="1" bgcolor="#a18670">&#8203;</td>
    <td width="1" bgcolor="#977c67">&#8203;</td>
    <td width="1" bgcolor="#82654b">&#8203;</td>
    <td width="1" bgcolor="#8e7255">&#8203;</td>
    <td width="1" bgcolor="#96816c">&#8203;</td>
    <td width="1" bgcolor="#928069">&#8203;</td>
    <td width="1" bgcolor="#94826b">&#8203;</td>
    <td width="1" bgcolor="#93826e">&#8203;</td>
    <td width="1" bgcolor="#8e7f6d">&#8203;</td>
    <td width="1" bgcolor="#8b7b6b">&#8203;</td>
    <td width="1" bgcolor="#877765">&#8203;</td>
    <td width="1" bgcolor="#857767">&#8203;</td>
    <td width="1" bgcolor="#817262">&#8203;</td>
    <td width="1" bgcolor="#7b6d5d">&#8203;</td>
    <td width="1" bgcolor="#756658">&#8203;</td>
    <td width="1" bgcolor="#6f6153">&#8203;</td>
    <td width="1" bgcolor="#6b5f51">&#8203;</td>
    <td width="1" bgcolor="#655b4d">&#8203;</td>
    <td width="1" bgcolor="#5f5548">&#8203;</td>
    <td width="1" bgcolor="#cccccc">&#8203;</td>
    <td width="1" bgcolor="#eeeeee">&#8203;</td>
    <td width="536">
      <table width="536" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="37">&nbsp;

          </td>
          <td width="408">
            <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="408" height="30" alt="">
          </td>
          <td width="91">
            <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="91" height="90" alt="">
          </td>
        </tr>
      </table>
    </td>
    <td width="1" bgcolor="#eeeeee">&#8203;</td>
    <td width="1" bgcolor="#cccccc">&#8203;</td>
    <td width="1" bgcolor="#5b4b39">&#8203;</td>
    <td width="1" bgcolor="#61513f">&#8203;</td>
    <td width="1" bgcolor="#675646">&#8203;</td>
    <td width="1" bgcolor="#695543">&#8203;</td>
    <td width="1" bgcolor="#705c46">&#8203;</td>
    <td width="1" bgcolor="#76634c">&#8203;</td>
    <td width="1" bgcolor="#7c674c">&#8203;</td>
    <td width="1" bgcolor="#7e6851">&#8203;</td>
    <td width="1" bgcolor="#684f3a">&#8203;</td>
    <td width="1" bgcolor="#6b4c2f">&#8203;</td>
    <td width="1" bgcolor="#81654b">&#8203;</td>
    <td width="1" bgcolor="#826b53">&#8203;</td>
    <td width="1" bgcolor="#856b52">&#8203;</td>
    <td width="1" bgcolor="#876b52">&#8203;</td>
    <td width="1" bgcolor="#866a4e">&#8203;</td>
    <td width="1" bgcolor="#896a4f">&#8203;</td>
    <td width="1" bgcolor="#8b6d50">&#8203;</td>
    <td width="1" bgcolor="#8b6e52">&#8203;</td>
    <td width="1" bgcolor="#8d6d51">&#8203;</td>
    <td width="1" bgcolor="#8f7054">&#8203;</td>
    <td width="1" bgcolor="#957656">&#8203;</td>
    <td width="1" bgcolor="#997759">&#8203;</td>
    <td width="1" bgcolor="#997656">&#8203;</td>
    <td width="1" bgcolor="#9a7859">&#8203;</td>
    <td width="1" bgcolor="#987657">&#8203;</td>
    <td width="1" bgcolor="#967250">&#8203;</td>
    <td width="1" bgcolor="#937050">&#8203;</td>
    <td width="1" bgcolor="#926e4d">&#8203;</td>
    <td width="1" bgcolor="#916e4f">&#8203;</td>
    <td width="1" bgcolor="#977353">&#8203;</td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>
jimmenycricket jimmenycricket, 3 years ago

Hi leinverheij,

Unfortunately this is part of the design, there is no way around not having the top image align with the td's :(


Thanks loads for looking into this JohnP, that code has got me a lot closer. It's now fine in everything apart from Outlook 2000

http://s4.postimg.org/nyr2frust/outlook_2000.jpg


Get in touch for any freelance work!
roshodgekiss roshodgekiss, 3 years ago

Hi jimmenycricket, could it be this issue with the Mailchimp Reset? That's the first thing that came to mind when you mentioned that this image stretching was occurring in Outlook 2000 only - just make sure that height and line-height aren't being applied to any of your images.

Thanks, jimmenycricket - 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

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