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
russboy, 2 weeks ago

quality generic  Clofazimine in UK/GB,  no prescription next day delivery 
order cheap generic  Clofazimine  in USA, no prescription c.o.d. 
where can i buy  Clofazimine in USA,  from a pharmacy without a prescription 


http://s018.radikal.ru/i510/1701/e4/9225389ac759.jpg

>>> Want to buy Clofazimine with Discount? CLICK HERE!  <<<









RELATED TAGS:

Clofazimine in Canada, 
Clofazimine online lowest prices 
ordering fulvicin - fulvicin with no prescriptions 
Clofazimine cash on delivery overnight 
where can i buy  generic  Clofazimine
Clofazimine in Australia, 
discount tablets  Clofazimine
Clofazimine cheap cod no rx USA 
licensed pharmacy to buy  Clofazimine
buy cheap online cardizem - cardizem non prescription 
Clofazimine delivered next day 
Clofaziminein Spain 
Clofazimine no prescription 
purchase cheap online  Clofazimine
Clofazimine without a prescription 
cost for  Clofazimine
cheap price diovan - diovan without prescription overnight 
Clofazimine saturday delivery 
order safety  Clofazimine
Clofazimine next day no prescription USA 
indian  Clofazimine
Clofazimine cod cash delivery 
Clofazimine without doctor prescription 
buy  easy  Clofazimine
Clofaziminein Manchester 
discount price ponstel - ponstel without dr prescription 
fda approved  Clofazimine
Clofazimine overnight shipping USA 
discount drugs  Clofazimine
where can i buy trental - trental in internet drugs overnight 
Clofazimine in United States, 
Clofazimine in USA, 
best price  Clofazimine in Australia, 
Clofazimine in UK/GB, 
Clofazimine in UK/GB, 
purchase generic  Clofazimine
order generic  Clofazimine
indian generic cymbalta - cymbalta overnight delivery no rx 
where to purchase  Clofazimine
where to buy  Clofazimine
buy online  Clofazimine
Clofazimine in Canada, 
order cheapest calan - calan no rx required 
buy cheapest  Clofazimine in USA,

ultdocs, 1 week ago

http://your.druggstorre.com/
order cheap generic  Artane in USA,  free prescription drug 
brand or generic  Artane  in United States, no prescription needed 
cheap price  Artane in USA,  pharmacy without a prescription 


http://s42.radikal.ru/i096/1701/8d/648dee524f6f.jpg

>>> Want to buy Artane with Discount? CLICK HERE!  <<<









RELATED TAGS:

Artane in Australia, 
Artane available united states 
purchase cheapest  Floxin;buy discount  Floxin;Floxin  cash on delivery overnight 
Artane overnight delivery cod 
cheap price for generic  Artane
Artane in USA, 
buy cheap online  Artane
Artane shipping no prescription 
buy cheap generic  Artane
purchase online  Tenormin;where can i order  Tenormin;Tenormin  no rx, fast worldwide shipping 
Artane free prescription drug USA 
Artanein Connecticut 
Artane privately no rx 
where can i purchase  Artane
Artane tablets without script USA 
legitimate pharmacy  Artane
online  Luvox;how can i buy  Luvox;Luvox  delivered overnight no rx 
Artane overnight delivery no r x 
order  Artane
Artane online overnight delivery 
how to buy  Artane
Artane online no prescription overnight 
Artane overnight delivery without a rx 
discount  Artane
Artanein Dudley 
how can i buy  Red Viagra;order online cheap  Red Viagra;Red Viagra  pay cod no prescription 
ordering online  Artane
Artane without prescription overnight shipping 
pharmacy  Artane
discount price  Adalat;order cheap generic  Adalat;Adalat  free prescription drug 
Artane in Australia, 
Artane in USA, 
buy safety cheapest  Artane in USA, 
Artane in UK/GB, 
Artane in USA, 
purchase  Artane
buy cheapest generic  Artane
where to get  Keflex;pharmacies that sell  Keflex;Keflex  pay cod no prescription 
generic  Artane
purchase cheapest generic  Artane
cheap price for  generic  Artane
Artane in Australia, 
pharmacies that sell  Shallaki;how much  Shallaki;Shallaki  with credit card no prescription 
licensed pharmacy to buy  Artane in UK/GB,

ultdocs, 1 week ago

http://your.druggstorre.com/
purchase cheapest  Dilantin in United States,  c.o.d. no rx 
buy cheap  Dilantin  in United States, without doctor prescription 
cheap generic  Dilantin in USA,  from u.s. pharmacy no prescription 


http://s010.radikal.ru/i312/1701/2a/264e625a7f03.jpg

>>> Want to buy Dilantin with Discount? CLICK HERE!  <<<









RELATED TAGS:

Dilantin in USA, 
Dilantin no prescription next day delivery 
buy at low cost  Indocin;cheapest  Indocin;Indocin  prescriptions online 
Dilantin without dr prescription USA 
order cheap online  Dilantin
Dilantin in USA, 
online cheap  Dilantin
Dilantin same day delivery 
discount pharmacy  Dilantin
mail order  Lopressor;buying  Lopressor;Lopressor  c.o.d overnight no rx 
Dilantin no prescriptions needed USA 
Dilantinin Bakersfield 
Dilantin overnight fedex USA 
want  Dilantin
Dilantin without a prescription USA 
secure ordering  Dilantin
how can i buy  Cymbalta;lowest prices  Cymbalta;Cymbalta  with no prescription 
Dilantin overnight USA 
licensed pharmacy to buy  Dilantin
Dilantin next day no prescription USA 
wholesale  Dilantin
Dilantin no prior script overnight USA 
Dilantin nextday shipping 
discount price for  Dilantin
Dilantinin Germany 
cheapest price  Elimite;how can i buy  Elimite;Elimite  overnight online pharmacy 
online cheap  Dilantin
Dilantin with creditcard no prescription 
cheapest to buy  Dilantin
where can i purchase  Zenegra;low prices  Zenegra;Zenegra  how to use,side effects,information 
Dilantin in USA, 
Dilantin in USA, 
discount tablets  Dilantin in USA, 
Dilantin in Canada, 
Dilantin in UK/GB, 
where to order  Dilantin
cheapest place to order  Dilantin
wholesale cheapest  Feldene;lowest price of  Feldene;Feldene  without prescription 
cheap price for  generic  Dilantin
indian  Dilantin
order now low price  Dilantin
Dilantin in USA, 
order  Protonix;where to get  Protonix;Protonix  without rx 
cheapest place to order  Dilantin in Canada,

ultdocs, 1 day ago

http://drugs-1.com/?id=1130
discount price  Prandin in UK/GB,  non prescription 
safe order  Prandin  in UK/GB, cash on delivery online prescriptions 
buy at low price  Prandin in USA,  c.o.d. without prescription 


http://s011.radikal.ru/i317/1701/3f/fdca066c8f89.jpg

>>> Want to buy Prandin with Discount? CLICK HERE!  <<<




GO to PHARMACY >>> http://worldmailes.com/pharm/go.php?sid=2&search=Prandin




RELATED TAGS:


Prandin no prescription drugstore 
http://www.nature.com/protocolexchange/labgroups/518685 - lowest prices Propecia c.o.d overnight no rx; 
Prandin online lowest prices USA 
buy discount generic  Prandin
Prandin in USA, 
discount price  Prandin
Prandin nextday shipping USA 
how can i get  Prandin
http://www.nature.com/protocolexchange/labgroups/518923 - lowest price of Tadalis SX c.o.d. without rx; 
Prandin medication cod 
Prandinin United States 
Prandin with no prescription USA 
how can i get  Prandin
Prandin no script needed USA 
cheapest generic  Prandin
http://www.nature.com/protocolexchange/labgroups/518603 - buying at lowest price Chloromycetin overnight saturday delivery NO PRESCRIPTION; 
Prandin no rx required 
order  Prandin
Prandin with no perscription 
where can i buy generic  Prandin
Prandin no prescription required USA 
Prandin overnight delivery without a rx 
low prices  Prandin
Prandinin New Orleans 
http://www.nature.com/protocolexchange/labgroups/518619 - order Ceclor CD with overnight delivery; 
how to order  Prandin
Prandin online cod 
get at low cost  Prandin
http://www.nature.com/protocolexchange/labgroups/518923 - lowest price of Tadalis SX c.o.d. without rx; 
Prandin in USA, 
Prandin in USA, 
discount pharmacy  Prandin in United States, 
Prandin in Canada, 
Prandin in USA, 
safe order generic  Prandin
legitimate pharmacy  Prandin
http://www.nature.com/protocolexchange/labgroups/519721 - wholesale cheapest Furacin without rx; 
purchase at best price  Prandin
pharmacy  Prandin
where to get  Prandin
Prandin in Australia, 
http://www.nature.com/protocolexchange/labgroups/519709 - buy cheap online Yagara NON PRESCRIPTION; 
tablets  Prandin in USA,

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