Horizontal Gap in Outlook2007

Hi, I've got some problems when viewing my newsletters in Outlook2007. Please see the 2 examples below, the only difference between 2 examples are the extra "0" on height attribute. And when viewing the 2nd example in Outlook2007, there are some huge horizontal gaps between td tags. please could you help me to figure out why?
(I've been working on the issue for weeks, and I'm now totally lost...)

screenshot of example2 (with gaps): http://img802.imageshack.us/img802/9366/0c0768395365440c8fe2ddd.png

Example1:

<html>
    <body>
        <table width="550" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top">
                    <table width="100%" cellspacing="0" cellpadding="0">
                        <tr><td height="200" bgColor="black">content goes here</td></tr>
                    </table>
                </td>
                <td valign="top">
                    <table width="100%" cellspacing="0" cellpadding="0">
                        <tr><td height="100" bgColor="red">content goes here</td></tr>
                        <tr><td height="200" bgColor="blue">content goes here</td></tr>
                        <tr><td height="300" bgColor="green">content goes here</td></tr>
                        <tr><td height="400" bgColor="yellow">content goes here</td></tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

Example2:

<html>
    <body>
        <table width="550" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top">
                    <table width="100%" cellspacing="0" cellpadding="0">
                        <tr><td height="2000" bgColor="black">content goes here</td></tr>
                    </table>
                </td>
                <td valign="top">
                    <table width="100%" cellspacing="0" cellpadding="0">
                        <tr><td height="1000" bgColor="red">content goes here</td></tr>
                        <tr><td height="2000" bgColor="blue">content goes here</td></tr>
                        <tr><td height="3000" bgColor="green">content goes here</td></tr>
                        <tr><td height="4000" bgColor="yellow">content goes here</td></tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>
leli, 6 years ago

Does anyone have an idea on this?

fyredefyre fyredefyre, 6 years ago

Well there's a lot you could to fix this and on quick inspection I can see you haven't setup the widths of your combined tables correctly.

A table of 550px should have both columns with set pixel widths and not percentages otherwise you run into the problem you are having.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
coxrichuk, 6 years ago

Did this fix seem to work for you?

I am having the same problem.

coxrichuk, 5 years ago

*bump Does anyone have any idea on fixes for this?

mmarlboro2010, 5 years ago

I am having the same problem.

BThies BThies, 5 years ago

It's always best to post your code so we can see what's causing your specific issue.

For Outlook 2007/2010 vertical and horizontal white spaces there are a number of reasons:

Padding - All <td>'s in the same <tr> must have the same top & bottom padding.

Borders - All <td>'s in the same <tr> must have the same size top & bottom border.  Easy solution is to use a nested table with a single cell that has the border.

Colspans / Rowspans - I avoid them as much as possible.  Use nested tables instead.

Use exact <td> width's - Your <td>'s should always add up correctly.  If you're having problems getting them to add up correctly when using left and right borders, use <td>'s with a background color to recreate those borders instead.

Images Above/Below Table in <td> - If you're placing an image above or below a nested table within a <td> cell, you'll occasionally get a white space between them.  The solution is easy: simply place the image within its own nested table (nested table over nested table) OR use a row from that nested table.

• Finally, the long format padding/margin bug - This is a rare bug that occurs when using a very long format.  A nested table with a cell containing padding/margin can cause a white space in a nested table in a different <td> within the same <tr> row.  Typically the white space will fall right in line with the padding of a nested <td> or the margin of a <p>.  Here's a visual:
http://www.thiespublishing.com/OLbug_exmp.jpg
One hack/fix I've found is to either double nest the tables or use tables on top of tables (repeating tables rather than repeating rows).


Brian Thies
Professional Email Developer
Thies Publishing
alexrobinsondesign alexrobinsondesign, 5 years ago
BThies :

• Finally, the long format padding/margin bug - This is a rare bug that occurs when using a very long format.  A nested table with a cell containing padding/margin can cause a white space in a nested table in a different <td> within the same <tr> row.  Typically the white space will fall right in line with the padding of a nested <td> or the margin of a <p>.  Here's a visual:
http://www.thiespublishing.com/OLbug_exmp.jpg
One hack/fix I've found is to either double nest the tables or use tables on top of tables (repeating tables rather than repeating rows).

I tried to recreate this and, of course, my table didn't split. This has been a big unsolvable issue for quite some time now and I'd love to know if your solution works. In your image you have one row tables. Did you mean to say that a TD within the parent cell had padding? Also, have you figured out how long the message needs to get to start breaking?


Alex Robinson Design
hello@alexrobinsondesign.com
www.alexrobinsondesign.com
BThies BThies, 5 years ago

It's completely random as to what element causes it.  It could just be a break in the length of the page that doesn't interact well with any element that falls in line with that break (end of a cell, padding, margin, etc.).

I believe it occurs somewhere around 1800-1850px, but unfortunately it's completely random depending on how the document is coded.

In a single column, switching from a nested table with multiple rows to a string of nested tables (or vice versa) can usually correct the issue.


Brian Thies
Professional Email Developer
Thies Publishing

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