My html email newsletter design doesn't render properly in Outlook 2007. There is a white horizontal gap towards the bottom which breaks borders and backgrounds. I've had this happen before and have no idea how to work around it. Any suggestions? I've posted the source below. It renders just fine except in Outlook 2007 (Word 2007).

By the way, you can preview the problem without Outlook, by opening the source with Word 2007.

Update: Source code is here.

Another update: Here's what the problem looks like.horizontal break

  • You didn't post the code. If you post it, I might have a better answer for you. In the meantime see if the answer below will help you. Jordan about 9 years ago
  • Somehow the source link got deleted. I've re-posted. Thanks! Jeff Alperin about 9 years ago

13 answers

2
points
This was chosen as the best answer

After searching around and troubleshooting this same issue for quite some time now the only answer I've come up with consistently is the following:

"Longer designs in which the rendering engine of Outlook 07/10 (Word'07) inserts a page break whenever it feels like it that inserts white space."

"The answer seems to be that these bugs are related to the size/length of the email and can't be eliminated, though sometimes the effect can be mitigated by editing the content to add additional horizontal spacing or by increasing the line-height attribute of some of the text that precedes the breaks."

Answered over 8 years ago by Alex Robinson
  • I agree. In fact, the 2nd quote is from me! Jeff Alperin over 8 years ago
danwellman 5600
1
point

Also, I find it useful to neutralize font-size and line-height in cells that just contain images (including spacers), e.g

<td style="line-height:0;font-size:0"><img src="some_image.gif" /></td>

But it's most useful for Hotmail, not sure if it'll help on OL2007...

Answered about 9 years ago by danwellman
  • This doesn't seem to resolve the problem Jeff Alperin about 9 years ago
  • I think what you're trying to do here is to reduce image blow-out in Hotmail. The correct way to solve this for tight designs would be adding the following to your image tags: <img src="some_image.gif" border="0" style="display: block; padding: 0; margin: 0;" /> Alex Robinson over 8 years ago
1
point

The real issue you're probably experiencing is Outlooks complete lack of the ability to properly render column and row spanning. If you have different cell structures in each row of a table, the solution is to simply close and start and new table. Also added a wrapper table to keep everything contained horizontally to the width of them all is a good idea.

Answered about 9 years ago by Gary Hepting
  • Thanks. I reworked the code to remove colspan. (I wasn't using rowspan.) Unfortunately, the problem still exists. I've posted the latest version of my source below. Jeff Alperin about 9 years ago
  • I thought I was going to have to pull out all my hair. THANK YOU for this answer! geme4472 over 8 years ago
1
point

In your source code I find code like this:

<TD> 
           <TABLE width="100%"> 
           <TR> 

The line break between the <td> and the <table> will make white-space appear. As mentioned above, there can't be ANY WHITESPACE between the first child element of the <td>, this includes line breaks (as I've found in the above source code).

This is an old bug in MSIE that is usually found in Internet Explorer in quirks mode (try using ie with a broken doctype and you might be able to replicate the problem).

I also tried adding cellpadding="0" cellspacing="0" to every table I found in the source code and that removed almost all of the gaps. It also gives you more controll over the micro and macro whitespace of the design. As many default margins and paddings are reset.

You can se the result in my published Litmus test.

Answered almost 9 years ago by Jens Hedqvist
  • I've removed white spaces as you suggested, so that <td> <table> is changed to <td><table>, but the breaks are still there. Jeff Alperin almost 9 years ago
  • Note: updated answer with the cellpadding/cellspacing solution. Jens Hedqvist almost 9 years ago
Jordan 469
0
points

One issue that might cause this is you may have white space between your content and closing tags. Specifically content in </td> tags. Be sure that there is no space between them. For example: your code should look like this: <td>Lorem Ipsum</td> not <td> Lorem Ipsum </td>. Also check your spacing between table rows. Make sure you have cellpadding and cellspacing set to 0 in your table tag. :

<table cellpadding="0" cellspacing="0">
Answered about 9 years ago by Jordan
  • Thanks for the suggestions. The closing tag spacing hint didn't seem to help. Setting cellpadding/cellspacing to zero helped some, but there's still a thin white horizontal break. Jeff Alperin about 9 years ago
Jordan 469
0
points

Try setting border-collapse:collapse on the table. Also, here is a very usefull guide to show which CSS properties are supported in Outlook 07/03: CSS E-Mail Guide

Answered about 9 years ago by Jordan
  • thanks. The e-mail guide is helpful. Unfortunately, the border-collapse suggestion doesn't work. Jeff Alperin about 9 years ago
  • Just posted a picture above of what the problem looks like Jeff Alperin about 9 years ago
0
points

It's still not working, but here's the latest version of the source (with the suggestions above implemented).
Source.

And here's what the problem looks like:

alt text

Answered about 9 years ago by Jeff Alperin
0
points

Hi mate

I have created a html email that has exactly the same problem as the one you created above. I have tried every suggestion I can find on the net and recreated the mail 5 times and still the same problem. Have you found a solution or have you taken the route that I think I will take and redesign the email to be more simple so that Outlook 2007 can render it properly.

Thanks

Nick

Answered almost 9 years ago by Nick Thorley
0
points

I have not found a solution, but I think I have found a way to minimize the issue (that is, to reduce the size of the break to something around 1-2 pixels in "thickness") by removing unnecessarily nested tables.

Answered almost 9 years ago by Jeff Alperin
0
points

Here's the code after eliminating the white spaces as suggested by Jens. It doesn't seem to help, though. Source

Answered almost 9 years ago by Jeff Alperin
  • I've updated the above answer with a final fix and test result. Jens Hedqvist almost 9 years ago
vandna 0
0
points

after much frustration i was able to solve a similar issue that i had. I've learned that text boundaries stretch to a maximum height of 23.7 inches (aprox. 1,790 pixels) before it automatically inserts a partition line and creates a new text boundary. Therefore, If you have any tables that are higher than 23.7 inches within your email, it will get broken up into multiple, stacked text boundaries. quickest solution is to break your email by creating another row and splitting the content into that--if your column is greater than 1790px. nothing else seems to work for me. and i had already tried everything in this post as well.

Answered over 6 years ago by vandna
Thomas 0
0
points

Had the same issue on a newsletter and was able to solve it by ensuring: (1) - <table cellpadding="0" cellspacing="0"> for all tables (2) - adding style="display:block" to all images

Hope this helps!

Answered over 6 years ago by Thomas
0
points

The only way I've found to address this issue while still using P containers is to replace the margin with a bottom-border or top-border equal to the desired bottom or top margin.

You can remove the white bars on ordinary text-containing paragraphs by eliminating top & bottom margins (that appears to be what triggers their appearance -- right and left margins have no impact at all); however, you can't get vertical spacing with padding, because Outlook 2007+ generally ignores padding on paragraphs.

You could also replace all your containers with DIVs. Of course, that renders the email semantically flat.

Answered over 6 years ago by Eric Scoles