Gap in Outlook 2007 and 2010

Hi all,

I’m having problems with my email and I’ve tried everything, read all the tips and articles. I think it’s the “page break” issue but I’m not sure about the way it manifests itself.

I’ve gotten it down to bare bones so you can easily see my problem. This is the link to the HTML:
http://www.linemotion.com/index-del-d.html
And these are the screenshots:
Outlook 2007: http://d.pr/i/Gaw2  (not good)
Outlook 2010: http://d.pr/i/JNre (not good)
Outlook 2013: http://d.pr/i/vcr4 (good)

The problem is, as you can see, that the big advertising image has a gap above it.

It doesn’t work if I make the image smaller or split it in smaller pieces. It doesn’t work even if I completely remove the image and replace it with a lot of text, it still gets bumped down.
The ONLY thing that “works” (and believe me, I’ve tried everything) is if I completely remove the left content part.

Any ideas?

Thanks in advance!

clementoriol, 3 years ago

Hi, in my experience there's lot of different fixes for this, like using :

table td
{
border-collapse: collapse;
}

or adding

style="display:block;" to your images

You could search for them on google and try them.
But recently, I stumbled upon a weird case, where my indentation was the cause of the issue.

I was having something like

<tr>
    <td>
          <p>content</p>
    </td>
<tr>

Changing it to

<tr>
    <td><p>content</p></td>
<tr>

Fixed the white gap issue on Oulook for me...
You could try these, hopefully one will work.

trunkadelic, 3 years ago

Thanks for the input!

But, when I say I've tried it all, believe me I did. :)

- border-collapse is already there
- I've tried settings the images to display: block; - no luck
- I've tried minifying my html so there is no white space at all - no luck

Still nothing. :(

Jonathan Hodak Jonathan Hodak, 2 years ago

I found a way to fix your code.  No idea what the true troublemaker was, I changed a few things at a time until I finally got it to stop appearing like that in outlook 2007 and 2010.  One of the main differences is rather than valign="top" I also added style="vertical-align:top;".  In any case yes I had to remove some of your things, but here is the basic coding for you, feel free to add things back in slowly and you might be able to narrow down the actual culprit.

Here is the code.  I also removed the table in the TR above the troublesome advertisement.

<!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>Lorem ipsum</title>
    <style type="text/css">

        /***********
        Originally based on The MailChimp Reset from Fabio Carneiro, MailChimp User Experience Design
        More info and templates on Github: https://github.com/mailchimp/Email-Blueprints
        http://www.mailchimp.com &amp; http://www.fabio-carneiro.com

        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, while not breaking desktop design. */
        .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%;} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
        #backgroundTable {margin:0 auto; padding:0; width:700px !important; line-height: 100% !important;}
        /* End reset */

        /* Some sensible defaults for images
        1. "-ms-interpolation-mode: bicubic" works to help ie properly resize images in IE. (if you are resizing them using the width and height attributes)
        2. "border:none" removes border when linking images.
        3. Updated the common Gmail/Hotmail image display fix: Gmail and Hotmail unwantedly adds in an extra space below images when using non IE browsers. You may not always want all of your images to be block elements. Apply the "image_fix" class to any image you need to fix.

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

        /** Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To correct we set the top/bottom margin to 1em in the head of the document. Simple fix with little effect on other styling. NOTE: It is also common to use two breaks instead of the paragraph tag but I think this way is cleaner and more semantic. NOTE: This example recommends 1em. More info on setting web defaults: http://www.w3.org/TR/CSS21/sample.html or http://meiert.com/en/blog/20070922/user-agent-style-sheets/

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

        /** Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support).  Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.

        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: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table.  The issue can cause added space and also throw off borders completely.  Use this fix in your header or inline to safely fix your table woes.

        More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/
        http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/

        H/T @edmelly

        Bring inline: No.
        **/
        table td {border-collapse: collapse;}

        /** Remove spacing around Outlook 07, 10 tables

        More info : http://www.campaignmonitor.com/blog/post/3694/removing-spacing-from-around-tables-in-outlook-2007-and-2010/

        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, bring your styles inline.  Your link colors will be uniform across clients when brought inline.

        Bring inline: Yes. */
        /*a {color: orange;}*/

        /* Or to go the gold star route...
        a:link { color: orange; }
        a:visited { color: blue; }
        a:hover { color: green; }
        */

        /***************************************************
        ****************************************************
        MOBILE TARGETING

        Use @media queries with care.  You should not bring these styles inline -- so it's recommended to apply them AFTER you bring the other stlying inline.

        Note: test carefully with Yahoo.
        Note 2: Don't bring anything below this line inline.
        ****************************************************
        ***************************************************/

        /* NOTE: To properly use @media queries and play nice with yahoo mail, use attribute selectors in place of class, id declarations.
        table[class=classname]
        Read more: http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/
        */
        @media only screen and (max-device-width: 480px) {

            /* A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from linking other numbers that look like, but are not phone numbers.  Use these two blocks of code to "unstyle" any numbers that may be linked.  The second block gives you a class to apply with a span tag to the numbers you would like linked and styled.

            Inspired by Campaign Monitor's article on using phone numbers in email: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/.

            Step 1 (Step 2: line 224)
            */
            a[href^="tel"], a[href^="sms"] {
                        text-decoration: none;
                        color: black; /* 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; /* or whatever your want */
                        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) */

            /* Step 1a: 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 */
        }

        /* Following Android targeting from:
        http://developer.android.com/guide/webapps/targeting.html
        http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/  */
        @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>

        
        <table cellpadding="0" cellspacing="0" border="0" width="700" align="center" bgcolor="#242424"> <!-- black content table -->
            <tr>
                <td height="10" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;" colspan="5">&nbsp;</td>
            </tr>
            <tr>
                <td width="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                <td width="517" valign="top"> <!-- left side -->
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td width="522" height="247" bgcolor="#ffffff" valign="top">
                                empty content for test
                            </td>
                        </tr>
                        <tr>
                            <td width="522" height="247" bgcolor="#ffffff" valign="top">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td width="522" height="247" bgcolor="#ffffff" valign="top">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td width="522" height="600" bgcolor="#ffffff" valign="top">
                                &nbsp;
                            </td>
                        </tr>                
                    </table>
                </td><!-- end left side -->
                <td width="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                <td width="168" valign="top"> <!-- right side -->
                    <table cellpadding="0" cellspacing="0" border="0" width="168" bgcolor="#242424">
                        <tr>
                            <td width="168" height="439" valign="top" bgcolor="#ffffff">
                                <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/top5ip.png" alt="Top 5 IP" width="168" height="49" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />

                                <!-- ///// top5ip content begin -->

                                    <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td valign="top" style="padding-left: 10px; padding-right: 10px;">

                                                <table cellpadding="0" cellspacing="0" border="0">
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea;  font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ipsum dolor</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="padding-top: 2px; padding-bottom: 5px;" bgcolor="#e9e9e9">
                                                            <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/ad-right.png" alt="News" width="148" height="14" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
                                                            <div align="center" style="font-size: 11px; line-height: 13px; padding-left: 10px; padding-right: 10px; padding-top: 1px;">
                                                                <a href="#" style="color: #4e4e4e; text-decoration: none; font-family: Arial; font-size: 11px;">Lorem ipsum dolor: Lorem ipsum lorem ipsum dolor sit amet</a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>

                                <!-- ///// top5ip content end -->

                            </td>
                        </tr>
                        <tr>
                            <td height="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="168" height="582" valign="top" bgcolor="#ffffff">
                                <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/latestip.png" alt="Latest IP" width="168" height="49" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />

                                <!-- ///// latestip content begin -->

                                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                        <tr>
                                            <td valign="top" style="padding-left: 10px; padding-right: 10px;">

                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="padding-top: 2px; padding-bottom: 5px;" bgcolor="#e9e9e9">
                                                            <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/ad-right.png" alt="News" width="148" height="14" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
                                                            <div align="center" style="font-size: 11px; line-height: 13px; padding-left: 10px; padding-right: 10px; padding-top: 1px;">
                                                                <a href="#" style="color: #4e4e4e; text-decoration: none; font-family: Arial; font-size: 11px;">Lorem ipsum dolor sit amet lorem ipsum lorem ipsum dolor sit amet</a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>

                                <!-- ///// latestip content end -->


                            </td>
                        </tr>
                        <tr>
                            <td height="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="168" height="12" valign="top" style="line-height: 12px;" bgcolor="#ffffff">
                                <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/ad-168.png" width="168" height="12" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
                            </td>
                        </tr>
                        
                        <tr>
                        <td width="168" style="background-color:#ffffff; color:#4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">
test text</td>
</tr>
<tr>
                        <td width="168" style="background-color:#ffffff; color:#4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">
test text</td>
</tr>
<tr>
                        <td width="168" style="background-color:#ffffff; color:#4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">
test text</td>
</tr>

<tr>
                            <td height="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="168" height="12" valign="top" style="line-height: 12px; vertical-align:top;" bgcolor="#ffffff">
                                <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/ad-168.png" width="168" height="12" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none; display:block;" />
                            </td>
                        </tr>
                        <tr>
                            <td width="168" valign="top" style="vertical-align:top;" bgcolor="#ffffff">

                                <!-- ///// ad content start -->

                                <table cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td width="168" height="632">
<a href="#"><img class="image_fix" src="http://placehold.it/120x600" width="120" height="600" style="display: block;" /></a>&nbsp;
                                        </td>
                                    </tr>
                                </table>

                                <!-- ///// ad content end -->


                            </td>
                        </tr>
                    </table>
                </td>
                <td width="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                <!-- end right side -->
            </tr>

        </table>
        <!-- end black content table -->
        
        
</body>
</html>

Best of luck,

- Jon
trunkadelic, 2 years ago

Jon,

First of all, thank you very much for your effort, I really appreciate the help.

I think my starting example was wrong, because in reality my left column is almost the same height as the right one.
I have made a new HTML with your changes + added some larger content to the left side to match my exact situation, and here is the link:
http://www.linemotion.com/index-del-e.html

And the screenshot of Outlook 2010:
http://d.pr/i/5ajl

Apparently, the issue has now transgressed to the left column. :(

Jonathan Hodak Jonathan Hodak, 2 years ago

Is that your full coding with everything inserted?  I feel like there is an underlying problem causing this, but without almost re-writing it, it will be difficult to debug completely.  However, I will take a look and see if I can debug it for you.  I test everything in litmus, so usually my code is pretty reliable.  Don't forget to test it yourself!


Best of luck,

- Jon
Jonathan Hodak Jonathan Hodak, 2 years ago

trunk,

Here is the code that definitely fixes the problem.  I ran this through litmus and while it is not perfect (outlook 2011 has a weird way of calculating border-box).  I tried to simplify the coding where I could.  Removed some div's, I never use them.  Took out your height, and instead put actual content.  I never use huge amounts of height, I let my content fill a box, and if I need there to be space I add in a row with the spacing that I need, but I don't like using height="600" and expecting it to be pixel perfect.  Again, I highly recommend you look over the coding, I did not have time to go through everything, but you can get an idea of what I did and some of the changes that I made and hopefully this will work out a bit better for you.

<!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>Lorem ipsum</title>
    <style type="text/css">

        /***********
        Originally based on The MailChimp Reset from Fabio Carneiro, MailChimp User Experience Design
        More info and templates on Github: https://github.com/mailchimp/Email-Blueprints
        http://www.mailchimp.com &amp; http://www.fabio-carneiro.com

        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, while not breaking desktop design. */
        .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%;} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
        #backgroundTable {margin:0 auto; padding:0; width:700px !important; line-height: 100% !important;}
        /* End reset */

        /* Some sensible defaults for images
        1. "-ms-interpolation-mode: bicubic" works to help ie properly resize images in IE. (if you are resizing them using the width and height attributes)
        2. "border:none" removes border when linking images.
        3. Updated the common Gmail/Hotmail image display fix: Gmail and Hotmail unwantedly adds in an extra space below images when using non IE browsers. You may not always want all of your images to be block elements. Apply the "image_fix" class to any image you need to fix.

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

        /** Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To correct we set the top/bottom margin to 1em in the head of the document. Simple fix with little effect on other styling. NOTE: It is also common to use two breaks instead of the paragraph tag but I think this way is cleaner and more semantic. NOTE: This example recommends 1em. More info on setting web defaults: http://www.w3.org/TR/CSS21/sample.html or http://meiert.com/en/blog/20070922/user-agent-style-sheets/

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

        /** Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support).  Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.

        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: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table.  The issue can cause added space and also throw off borders completely.  Use this fix in your header or inline to safely fix your table woes.

        More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/
        http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/

        H/T @edmelly

        Bring inline: No.
        **/
        table td {border-collapse: collapse;}

        /** Remove spacing around Outlook 07, 10 tables

        More info : http://www.campaignmonitor.com/blog/post/3694/removing-spacing-from-around-tables-in-outlook-2007-and-2010/

        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, bring your styles inline.  Your link colors will be uniform across clients when brought inline.

        Bring inline: Yes. */
        /*a {color: orange;}*/

        /* Or to go the gold star route...
        a:link { color: orange; }
        a:visited { color: blue; }
        a:hover { color: green; }
        */

        /***************************************************
        ****************************************************
        MOBILE TARGETING

        Use @media queries with care.  You should not bring these styles inline -- so it's recommended to apply them AFTER you bring the other stlying inline.

        Note: test carefully with Yahoo.
        Note 2: Don't bring anything below this line inline.
        ****************************************************
        ***************************************************/

        /* NOTE: To properly use @media queries and play nice with yahoo mail, use attribute selectors in place of class, id declarations.
        table[class=classname]
        Read more: http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/
        */
        @media only screen and (max-device-width: 480px) {

            /* A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from linking other numbers that look like, but are not phone numbers.  Use these two blocks of code to "unstyle" any numbers that may be linked.  The second block gives you a class to apply with a span tag to the numbers you would like linked and styled.

            Inspired by Campaign Monitor's article on using phone numbers in email: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/.

            Step 1 (Step 2: line 224)
            */
            a[href^="tel"], a[href^="sms"] {
                        text-decoration: none;
                        color: black; /* 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; /* or whatever your want */
                        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) */

            /* Step 1a: 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 */
        }

        /* Following Android targeting from:
        http://developer.android.com/guide/webapps/targeting.html
        http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/  */
        @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>
<table cellpadding="0" cellspacing="0" style="border-top:5px solid #242424; border-bottom:5px solid #242424; border-left:5px solid #242424; border-right:5px solid #242424;" width="700" align="center" bgcolor="#242424"><!-- black content table -->
            <tr>
                <td width="700" height="10" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px; vertical-align:top;" colspan="5">&nbsp;</td>
            </tr>
            <tr>
                
                <td width="527" valign="top" style="vertical-align:top;"> <!-- left side -->
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td width="527" height="247" bgcolor="#ffffff" valign="top" style="vertical-align: top;">empty content for test
</td>
                        </tr>
                        <tr>
                            <td height="247" bgcolor="#ffffff" valign="top" style="vertical-align: top;">
                                empty content for test
                            </td>
                        </tr>
                        <tr>
                            <td height="147" bgcolor="#ffffff" valign="top" style="vertical-align: top;">empty content for test</td>
</tr>
<tr>
<td height="247" bgcolor="#ffffff" valign="top" style="vertical-align: top;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top" style="font-size:16px; font-family:Georgia, Palatino, 'Palatino Linotype', 'Hoefler Text', 'Times New Roman', serif; text-align:left; font-style:italic; line-height:21px; font-weight:bold; ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top" style="font-size:14px; line-height:21px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333; text-align:left; font-weight:normal; vertical-align:top;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
</tr>                
</table>
</td><!-- end left side -->
                <td width="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                <td width="168" valign="top" style="border-bottom:5px solid #242424;"> <!-- right side -->
                    <table cellpadding="0" cellspacing="0" border="0" bgcolor="#242424">
                        <tr>
                            <td width="168" height="439" valign="top" bgcolor="#ffffff"><img class="image_fix" src="http://www.linemotion.com/etc/ce-img/top5ip.png" alt="Top 5 IP" width="168" height="49" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />

                                <!-- ///// top5ip content begin -->

                                    <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td width="168" valign="top" style="padding-left: 10px; padding-right: 10px;">

                                                <table cellpadding="0" cellspacing="0" border="0">
                                                    <tr>
                                                        <td width="148" valign="top" style="line-height: 14px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea;  font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ipsum dolor</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="padding-top: 2px; padding-bottom: 5px;" bgcolor="#e9e9e9">
                                                            <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/ad-right.png" alt="News" width="148" height="14" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
                                                          
                                                                <a href="#" style="color: #4e4e4e; text-decoration: none; font-family: Arial; font-size: 11px; line-height:14px; text-align:center;">Lorem ipsum dolor: Lorem ipsum lorem ipsum dolor sit amet</a>
                             
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">Lorem ipsum dolor</td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>

                                <!-- ///// top5ip content end -->

                            </td>
                        </tr>
                        <tr>
                            <td height="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="168" height="582" valign="top" bgcolor="#ffffff">
                                <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/latestip.png" alt="Latest IP" width="168" height="49" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />

                                <!-- ///// latestip content begin -->

                                    <table cellpadding="0" cellspacing="0" border="0" >
                                        <tr>
                                            <td valign="top" style="vertical-align:top; padding-left: 10px; padding-right: 10px;">

                                                <table cellpadding="0" cellspacing="0" border="0" >
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="padding-top: 2px; padding-bottom: 5px;" bgcolor="#e9e9e9">
                                                            <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/ad-right.png" alt="News" width="148" height="14" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
                                                          
                                                                <a href="#" style="color: #4e4e4e; text-decoration: none; font-family: Arial; font-size: 11px; line-height:14px; text-align:center;">Lorem ipsum dolor sit amet lorem ipsum lorem ipsum dolor sit amet</a>
                                                                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ipsum dolor sit amet lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem ips</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; padding-bottom: 9px; border-bottom: solid 2px #eaeaea; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="line-height: 14px; padding-top: 7px;"><a href="#" style="font-size: 11px; font-weight: bold; color: #4e4e4e; text-decoration: none; font-family: Arial;">Lorem</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="top" style="color: #4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">from Lorem</td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>

                                <!-- ///// latestip content end -->


                            </td>
                        </tr>
                        <tr>
                            <td height="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="168" height="12" valign="top" style="line-height: 12px;" bgcolor="#ffffff">
                                <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/ad-168.png" width="168" height="12" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
                            </td>
                        </tr>
                        
                        <tr>
                        <td width="168" style="background-color:#ffffff; color:#4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">
test text</td>
</tr>
<tr>
                        <td width="168" style="background-color:#ffffff; color:#4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">
test text</td>
</tr>
<tr>
                        <td width="168" style="background-color:#ffffff; color:#4e4e4e; padding-top: 2px; font-family: Arial; font-size: 11px;">
test text</td>
</tr>

<tr>
                            <td height="5" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="168" height="12" valign="top" style="line-height: 12px; vertical-align:top;" bgcolor="#ffffff">
                                <img class="image_fix" src="http://www.linemotion.com/etc/ce-img/ad-168.png" width="168" height="12" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none; display:block;" />
                            </td>
                        </tr>
                        <tr>
                            <td width="168" valign="top" style="vertical-align:top;" bgcolor="#ffffff">

                                <!-- ///// ad content start -->

                                <table cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td width="168" align="center" height="632" style="text-align:center;">
<a href="#"><img src="http://placehold.it/120x600" width="120" height="600" style="text-align:center;"/></a>&nbsp;
</td>
</tr>
</table>

                                <!-- ///// ad content end -->


                            </td>
                        </tr>
                    </table>
                </td>
                
                <!-- end right side -->
            </tr>
<tr>
                <td width="700" height="10" bgcolor="#242424" valign="top" style="font-size:1px;line-height:5px; vertical-align:top;" colspan="5">&nbsp;</td>
            </tr>
        </table>
        <!-- end black content table -->
        
        
</body>
</html>

Happy Friday!


Best of luck,

- Jon
trunkadelic, 2 years ago

Jon,

Thanks a ton for your help so far! :) I will try it out and see if it works.

Regarding your question about heights - the client demanded that the design be pixel-perfect (as much as possible), that's why I had to rely on heights.

edardoua, 2 years ago

Is that your complete programming with everything inserted?  I experience like there is an inherent issue resulting in this, but without almost re-writing it, it will be challenging to debug absolutely.  However, I will take a look and see if I can debug it for you.  I analyze everything in litmus, so usually my rule is fairly efficient.  Don't ignore to analyze it yourself!



<a href="http://spybubblez.fr/">Spybubble</a> <br/>

Jonathan Hodak Jonathan Hodak, 2 years ago

I understand about clients wanting things pixel perfect, the company I work for is the same.  However I use height for spacers, usually like 10-30 pixels tall, beyond that I use a lot of rows with text and put height on those, and I don't have too many problems generally speaking.  So maybe rather that have huge heights and few table rows, try using more rows with smaller heights and that might help you out a bit?  I know, adding everything together can be lots of fun at times.  Sorry.  Let me know if you run into any problems, and I will try to help if I can.


Best of luck,

- Jon

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