The Cause: As some might know, Outlook 2007 and 2010 use the Microsoft Word rendering engine for displaying HTML emails. The rendering engine uses "text boundaries" which acts the same way as a "page break."
From our research, we learned that text boundaries stretch to a maximum height of 60cm (approx. 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 60cm 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 research out there, it appears there is no way to disable or increase the maximum height for text boundaries. In all of the online documentation we 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:
- A table with two or more columns that stretch longer than 60cm in height.
- Nested tables within a large containing table.
- Tables that are reliant on row spans that exceed 60cm in height.
- A large image that is placed at or around the 60cm. The order 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 60cm 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.
We recommend testing your email first to see if text boundaries are causing spaces. As we 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 60cm in height. A new text boundary is created every time you create a new table element so one table might be 25cm and another might be 35cm. 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 60cm 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.
2.) Try setting a break right BEFORE the spacing, using .
For example, if the issue is right on a certain table row, then make that <tr> into:
<tr style="page-break-before: always" >
3.) Add a "height" attribute in the TD that is getting broken. Sometimes this can limit the amount of spacing.
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" > </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.