Spacing Issues in Outlook 2007 and 2010

In some instances, Outlook 2007 and 2010 will render an unwanted horizontal space in your email. We've been aware of this for a while and figured it's time we hunker down in search for an explanation. If you are running into this issue, hopefully this article will provide you with some useful work-a-rounds.

We'd like to offer a special thanks to Adam Naisbitt from EasyBlast.co.uk for helping us troubleshoot and collaborate on possible fixes. Thanks Adam, it's people like you who keep our developer community going strong!

The Cause

As we all know, Outlook 2007 and 2010 use the Microsoft Word rendering engine for displaying HTML emails. The desktop application of MS Word allows you to choose from a few different layout views but Outlook uses the "Web Layout" view which is much like a WYSIWYG editor because it outputs its own HTML code. Within its viewer, it uses "text boundaries" which differ slightly from "page breaks." When Word interprets a page break, it actually inserts a <BR /> tag in its HTML output. Text boundaries are used to separate elements within the web layout for purposes of printing and don't actually output any HTML code.

From our research, we 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.

Most often the contents from one text boundary to the next is flush and therefore unnoticeable. However, when you do find unwanted spacing, you might be in for lots of fine tuning before you get it resolved.

Automatically generated text boundaries always render at the same height so if you have a table with a width of 100% of the view pane and your content flows accordingly, the location of the actual partition line will be dependent on the size of the viewer's window. Also, I was primarily testing with Outlook 2007, part of Microsoft Office Enterprise 2007. The maximum height of text boundaries may vary from one version of Microsoft Office to the next.

From what I can tell, there is no way to disable or increase the maximum height for text boundaries. In fact, I was really hoping to find a document specific property in the HTML output because that might have led way a possible hack. In all of the documentation I have found, even from Microsoft, they imply that the maximum document size is a hard, fast rule and there is no getting around it.

Here are some instances that might cause the spacing:

1.) A table with two or more columns that stretch longer than 23.7 inches in height.

2.) Nested tables within a large containing table.

3.) Tables that are reliant on rowspans that exceed 23.7 inches in height.

4.) A large image that is placed at or around the 23.7 inch border might get bumped up or down from one text boundary to the next causing lots of unwanted spacing. In fact, I also tested images that where larger than 23.7 inches and the Word viewer essentially resizes the image to a proportion that fits within the text boundary. So if you insert really tall spacer gif, for example, it will get placed into one of the text boundaries and will be resized within that boundary's height constraint.

There may be several other instances that cause the gap, if you come across one that hasn't been listed here, please let us know about it, we'd be happy to look at your HTML code.

So what is the solution?

Generally speaking, I recommend testing your email first to see if text boundaries are causing spaces. As I mentioned, many times the table looks fluid, no matter how many nested tables you may have. If you do see a space, here are some things you can try:

1.) The best solution is to break out your tables into two (or more) stacked tables that are less than 23.7 inches in height. A new text boundary is created every time you create a new table element so one table might be 10 inches and another might be 15 inches. As long as each individual table does not exceed the height constraint you won't end up with automatically generated text boundaries.

Use nested tables within each stacked table but be aware of the fact that some of your nested tables might be over 23.7 inches in height. With that said, you could start breaking those apart first and test between each iteration.

When doing this, you might have to remove all spaces and carriage returns within your code, particularly between your closing and opening tables. This helps to ensure that they stack on top of each other perfectly.

Since this may cause a complete restructure of your table layout, it's a good idea to get in the habit of designing your tables so that they can be easily stackable when needed. You might only have to break apart one table that exceeds the maximum height, others might not cause a noticeable gap.

If you are using a wrapper table to control the background color of your email try using a span with "display:block" instead. Click here for an explanation on that.

2.) Try setting a break right BEFORE the spacing, using style="page-break-before: always".

For example, if the issue is right on a certain table row, then make that <tr> into:

A big thanks to MiketheCoder for this recommendation! Here's the full article: Outlook 2007 Screws up spacing where page breaks would appear

3.) Add a "height" attribute in the TD that is getting broken. Sometimes this can limit the amount of spacing.

<td height="2000">

4.) You can try inserting breaks or paragraph tags strategically in order to match up each column of your table so the text boundary appears seamless. 

<p style="height:10px; margin-bottom:0; margin-top:0; padding:0">&nbsp</p>

It is important to break out margin-bottom and margin-top here because Hotmail does not support the generic "margin" property. Since this can be tricky and your content is bound to change, this option is less ideal.

5.) You can try adding content to the section above the forced break to push the content down and avoid the break - but this is also not ideal as you might not be in charge of the content within the email.

I have read from other blogs and resources to avoid using more than 3 nested tables in Outlook 2007 and 2010 but I have yet to prove this theory. Many times, if you remove nested tables, you are actually removing a table that exceeds 23.7 inches so this might be why it has worked for others in the past. Again, if you have more examples or information to share, don't hesitate to reach out to us and shed your wisdom on the subject.

If you have gotten in the habit of inserting wrapper tables with a width of 100% for purposes of adding a background color, this might cause your table to be over 23.7 inches. I wrote a follow up article on ways to achieve the same effect in every email client without having to use a wrapper table: Background Colors in HTML Emails.