Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

Spacing Issues in Outlook 2007 and 2010

Posted May 16, 2011 by Michelle Klann

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

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.


(click on the image above to view the entire email)

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:

<tr style="page-break-before: always">

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.

Comments

Chris Peak pic
Chris Peak
WOW - at little past midnight last night I found this article and it saved me from the depths of depression trying to figure out - why ow why is this happening on a big campaign I was sending out this morning - ALL NOW SORTED - YOU ARE A SUPERSTAR! Many thanks!
Posted 05/25/2011

Phil Glanville pic
Phil Glanville
You may (or may not) wish to rewrite your introduction... The problem you describe is not "unwanted horizontal space" imo but rather "unwanted vertical space". The gaps may well appear as horizontal shapes, but the breaks are appearing in the vertical flow of the document.

I am actually looking for a solution to unwanted horizontal space between sibling tables (in Outlook 2007) this article got my hopes up momentarily... before dashing them rather disappointingly. It does sound like a rather mad issue you describe (typical of Microsoft), thankfully I've never had to create an email over 23.7 inches high.. :S
Posted 06/01/2011

Nathaniel pic
Nathaniel
Thank you for detailing this! I've been wracking my brain trying to figure out what was going on in Outlook 2010 -- this article and another on MikeTheCoder's web site helped substantially. What a ridiculous thing to happen in emails meant to be displayed on SCREEN! Thanks yet again Microsoft for your inane and maddening software and browser bugs.
Posted 06/09/2011

Scott See pic
Scott See
I found an easy fix. Publish the email as a web page. Copy the web page into an email that you send yourself. Then use the source code of that email. Don't even try to decipher the HTML that Microsoft creates. I'll give you a headache. (Note to Microsoft if anyone there reads this: Why the heck would you use Word to render HTML when Internet Explorer is most certainly installed on the same machine? Can't you leave page breaks to printer drivers?)
Posted 11/24/2011

Ceb pic
Ceb
Thanks a ton, this has been driving me crazy...
Posted 11/24/2011

lewismc pic
lewismc
Inches! Seriously?
Posted 11/30/2011

Richard Lalchan pic
Richard Lalchan
So glad I found this too. Its also been driving me nuts.
Posted 12/05/2011

Helen Neely pic
Helen Neely
Thanks for this tip - I was pulling my hair out the whole day until I saw this tip. My images had spaces between them.

Nice work.
Posted 12/06/2011

Victoria Martinez pic
Victoria Martinez
I nearly cried when I found this. Thank you.
Posted 12/16/2011

T pic
T
@Scott, you are right, but it can go deeper than that. If they actually wrote Internet Explorer properly and modularly they could use the same rendering engine without even worrying about if any dependencies are installed.

But if Microsoft was really thinking, they'd just fork the Webkit code and use that instead of making a square wheel when we already have a plethora of round templates available!
Posted 12/20/2011

Gandhimathy S pic
Gandhimathy S
We are also having the same unwanted space issue.Can you please review my code?
Posted 01/19/2012

Sam pic
Sam
I have a tall image 688 x 3776 pixels.

Whenever I try to Insert the picture in the email body, Outlook automatically resizes it to about 56% of its size. This image is a snapshot of a webpage, hence due to the resizing the text in the image is not readable.

Is there a way to insert and maintain the original proportions of the image in Outlook 2007?
Posted 03/13/2012

Avatar
Michelle Klann
Sam,

Not that I know of, if I where you, I would try slicing that image to three images with a max height of 1790px each. Then stack them on top of each other. You might have to use two separate tables to do so.
Posted 03/13/2012

Sam pic
Sam
@Michelle Klann
Thanks for your solution, it worked, though i find it to be a crude one. Is that the only way to go about it, I mean I have longer pictures to email some streching to 10,000px, do I keep on cutting them. Is there no roundabout to this problem, a solution which would let us insert a picture of any size and retain its original dimensions.

Sam
Posted 03/16/2012

developer_autumn01 pic
developer_autumn01
Another Tip. Vertical padding on <td> or <tr> will cause horizontal white space between your rows. use
for vertical padding
Posted 04/30/2012

Thomas pic
Thomas
Great article. Thanks very much!
Posted 05/15/2012

Erik Woods pic
Erik Woods
The fact that you use inches as a measurement here makes me want to discount everything you've written about, ever, in regards to technical issues with e-mail.

I feel like I shouldn't have to say it, but pixels are relative to resolution. How can you say "27 inches?" An inch at 1024x768 has more pixels than an inch at 800x600 pixels. Sooooo...... What the heck?

Also - it stands to reason that if your email is long enough that you encounter this issue - you probably have other things you should worry about - like staying focused on the message of your e-mail. Amirite?
Posted 07/02/2012

Michael pic
Michael
I found if a line height is set on the <td> it will add a break space.
Posted 09/04/2012

javelin pic
javelin
We have a series of emails that goes out monthly that are strictly vertical designs with the left side being the actual content and the right side being an offer followed by a long list of 8 movies with info about them. These on the right are all images and right above the final image is where the big break is occurring... I just attempted sending myself a test after moving the final two images into another table underneath the one that was having the issue.

The break is still there. Both columns are 1793px in height, but the left column is not experiencing issues. I'm not sure what else I can try to resolve this problem. Any insight would be helpful.
Posted 09/07/2012

Stuart pic
Stuart
I recently ran into this issue on a two column newsletter (single table) I was converting to a responsive mobile design (nestled tables for each column, going to single column for mobile). Worked fine without the nestled tables, but Outlook choked on the long left column once modified.

I opted to use conditional comments to prevent Outlook from rendering the nestled tables:

<tr>
<!--[if !gte mso 9]><!---->
<td colspan="2">
<table cellpadding="0" cellspacing="0" align="left">
<tr>
<!--<![endif]-->
<td id="leftColumn">

Later on...

</td>
<!--[if !gte mso 9]><!---->
</tr></table>
<table cellpadding="0" cellspacing="0">
<tr>
<!--<![endif]-->
<td id="rightColumn">

Extra tags on the if line are to prevent IE7/8 from rendering the error comment. Hope this helps someone!
Posted 09/11/2012

Linus minus pic
Linus minus
Hello;
I have the same problem with my newsletter, spacing between images. i have tried :

display : inline and block;
or valign="top" or bottom;

nothing happened the same render error.
can you help mi please

Thank you
Posted 10/03/2012

George pic
George
Tip for those attempting responsive design emails:

I had a two-column email that converted to a one-column email with the right column popping down below the left column in "mobile mode." This worked fine except in Outlook. I think Outlook was calculating the total length of the email by stacking the two columns even though they were meant to display side-by-side.

I discovered that if I made the two columns into two actual columns in a single table, Outlook stopped inserting ridiculous page breaks. A handy tool for this is the conditional comment which works in Outlook too:

<!--[if mso]>
<table ... align="left">
<![endif]-->
<!--[if !mso]> -->
<table ...>
<!-- <![endif]-->

This saved my email from the scrap heap.
Posted 10/26/2012

Jonathan pic
Jonathan
I understand why the problem occurs (and thank your for explaining it so clearly), but I'm not sure how page breaks can be avoided in a two-column email layout.

The only reliable way I know of to achieve is two-column layout is with a wrapper table - one column for the main content, one for sidebar. This is problematic, since the wrapper table will grow infinitely tall, triggering the page break bug. Yes, it's possible to stack multiple wrapper tables, but that depends on articles in the content and sidebar columns being equal heights (otherwise you'll introduce new gaps).

The screenshot used in this article is a perfect example of the problem I'm describing. Regardless of how the nested tables are stacked, the wrapper table will still be too tall.

Is there any way you are aware of to achieve a tall two-column layout without gaps appearing in Outlook?
Posted 10/31/2012

Mazurka pic
Mazurka
I have 6 separate tables that each display dates and locations in rows of two, none of these are anywhere close to 23.7 in. the second last table breaks 3/4 of the way down which also pushes the 6th table, the one beside it, down to exactly where it breaks... this has go me baffled. I'm using align left and right, widths and break clear all's to make the rows of 2.
Posted 01/02/2013

Jack pic
Jack
Thanks for sharing the information with us.I also bookmark your site and visit it in future for more info.
Posted 02/26/2013

Alex pic
Alex
I am creating an image based email with image map over top. Originally I had a very long image (over 2000px in height). I have now split that into 2 images (top half: 1655px, bottom half: 657px).

The images are inside separate divs and I thought would sit on top of each other - displays fine in browser but in Outlook I get an emormous white gap between the top and bottom halves (approx 500px high).

Have tried adding
style="valign: top; display: block;"
to both images.

Any other ideas out there?

Thanks
Posted 03/20/2013

Avatar
Michelle Klann
Alex,

Did you try putting your images into a table instead of using Divs?

Also, in order for this fix to work, the table you place your images in should not be nested in another table.
Posted 03/20/2013

Jodi pic
Jodi
Thank you so much! Setting the height of the <td> worked for me. I'm so happy I finally found a fix for this annoying problem.
Posted 04/09/2013

Roxana pic
Roxana
Thank you so much for your article. It is so well documented, and bring some really good solutions. I have solved my issues with Outlook 2007 when reading your article. Best regards!
Posted 04/12/2013

jkeene1866 pic
jkeene1866
I have unwanted space at the top of the right hand column in a two column layout. My text and images are in nested tables. I started with html for an adaptive email that you had posted in a different blog. I used the two-column and one-column portions of the template. I've tried the fix eliminating the 100% table wrapper as well as using: <table align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> and the tips above. Not sure whether I'm applying in wrong place or what. This is what happens in the test https://litmus.com/pub/c0d16f8 (see Outlook 7 & 10) and here is the html: http://www.myriadmarketingsolutions.com/sample-responsive.html . Any ideas?
Posted 04/21/2013

Avatar
Geoff Phillips
@jkeene1866,
The fix for this issue is simple. Just change your 2nd column (begins with "Want more news you can use?") to align=right. You can see this fix here:
http://www.emailonacid.com/app/acidtest/viewresult/dvJA1Ern1tka8QiADH06ldlGC8Nvo4zxA5pCKfjytBnPy

Also notice the ease of scrolling using drag and throw in our mobile results. Perhaps you should consider switching from Litmus to Email on Acid wink
Posted 04/22/2013

jkeene1866 pic
jkeene1866
@Geoff,

Thanks Geoff that worked great! The only thing is when I test it now I see that the iPhone is still in one column but not the full width of the iPhone screen. Any idea why that shift occurs? You will note the issue in this test on Email on Acid smile http://www.emailonacid.com/app/acidtest/viewresult/B3sdq7KMJacvzoTf1i61XBtNRCE8FhKrYbZAa1XCotj2o
Posted 04/23/2013

Avatar
Geoff Phillips
@jkeene1866,
Yes, I see what you mean. I tried to recreate it using the URL you posted last time, but it looked normal. Is there an updated set of code I could use?
Posted 04/23/2013

jkeene1866 pic
jkeene1866
@Geoff, Thanks for your help on this. The only change I made was making the right align. Here's the html: http://www.myriadmarketingsolutions.com/generic-responsive2.html
Posted 04/23/2013

Avatar
Geoff Phillips
@jkeene1866,
I just ran that exact URL with no problems. Have you tried running the test again? Here is what I got:
http://www.emailonacid.com/app/acidtest/viewresult/JlzLLLvUk3an4Ao9fetrUA4aeQqv0Os6SIE1Pe0fsZmnl/CA
Posted 04/23/2013

jkeene1866 pic
jkeene1866
@Geoff, Yes I tried running it again. I also tried it in Litmus and got the reduced screen size. And I'm seeing the same reduced screen size on an actual iPhone. I'm sending it out from Constant Contact. Could that be what is causing the issue?
Posted 04/23/2013

jkeene1866 pic
jkeene1866
@Geoff, So I pasted the HTML instead of sending it from Constant Contact and it does look fine on iPhone. If logic holds then it's a problem with Constant Contact. Do you know of any such issues with particular email vendors or how to get around them?
Posted 04/23/2013

Avatar
Geoff Phillips
@jkeene1866,
I'm afraid not, but it does seem like you correctly identified the source of the problem. I would recommend that you email Constant Contact about this problem and see if they have an option to send that will not mess with your code.
Posted 04/23/2013

jkeene1866 pic
jkeene1866
@Geoff, I switched email providers and the test with fake content was fine. When I put in real content I'm now seeing the same problem where the second column floats down. The right column is right aligned as you suggested previously. Also, the right float seems to nudge the second column to the right on the iphone so it doesn't quite align on the left with the first column in the iPhone view. Any ideas?
http://www.emailonacid.com/app/acidtest/viewresult/G8soYnmXYde9qqGkZXO0hwmejixK5hQUSoQvYjMqbJQH7
Posted 04/24/2013

jkeene1866 pic
jkeene1866
@Geoff, this is the html: http://www.myriadmarketingsolutions.com/launch-email.html
Posted 04/24/2013

ioan pic
ioan
THANKS.. i searched for like 1h over the internet for an answer to my problem and i found it here.. YOU'RE THE GREATEST!
Posted 04/24/2013

Vedran pic
Vedran
My fix for this (after many hours of agony):

<table class="content-table" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<!-- Start left-column content -->
<td valign="top">
<table width="390" class="left-column" cellpadding="0" cellspacing="0" border="0" align="left">
LEFT COLUMN CONTENT
</table>
<!-- End left-column content -->

<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->

<!-- Start right-column content -->
<table width="300" class="right-column" cellpadding="0" cellspacing="0" border="0" align="right">
RIGHT COLUMN CONTENT
</table>
<!-- End right-column content -->
</td>
</tr>
</table>

Nothing else worked, the break would always happen and move the right column content almost to the bottom of the email. Note that I also add:

border-spacing: 0;
border-collapse: collapse;

to all my tables (not in the example above since I use a grunt script to add it after I'm done with html. Both of my columns are more than 1800px long and this worked great for me.
Posted 12/18/2013

fixandfoxy pic
fixandfoxy
i solved it using

.msofix
{
padding: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
margin: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}

on TD and P sections
Posted 01/27/2014

Oana pic
Oana
I started testing a newsletter I coded... 2 days and 100 test later I found your article. All I want to say is "Thank you!"
Posted 02/04/2014

Posted 02/07/2014

Akshay pic
Akshay
outlook renders space between table table in a same row!! i took 320 and 320 table in whole 640px width.and i am trying to make responsive!! its working fine in all browsers.but didn't work in outlook 2010 and 2013 and 2007!!
please help me out
Posted 04/09/2014

AJ pic
AJ
Not sure if this has been brought up yet, but if you have a 2-column layout, and one of them breaks, assign each column (TD) a class that floats left and is 100% wide (or any %).
Posted 04/25/2014

Leo Favre pic
Leo Favre
Vedran's answer worked for me. Thanks.
Posted 09/15/2014

fixyfoxy pic
fixyfoxy
Still no luck :(

The only option available for us is solution 2.
We do not have control over the higher level tables as they are generated dynamically by a editor - we can only edit the inner tables.

We have tried adding in 'page-break-before' and 'page-break-before' in every single possible place: the offending cell, row, table, in a tag before the issue, etc - all to no avail, the gap still appears mid-way through one of the tables.

Anyone else in the same boat? Such a nightmare! smile
Posted 10/08/2014

Jose C pic
Jose C
Vedran's fix worked! Thanks!!!
Posted 11/06/2014

jbanetwork pic
jbanetwork
WOW! Thanks Vedran!
Posted 11/23/2014

Joshua Blauvelt pic
Joshua Blauvelt
Ugh, I thought I was going crazy. I searched for this issue but guess I used the wrong keywords til today. I have gone over and over my code racking my brain, meanwhile clients are shouting to the peaks of our corporate leadership to get this fixed. Thank you for the documentation!
Posted 12/17/2014

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!