Spacing Issues in Outlook 2007 and 2010
In some instances, Outlook 2007 and 2010 will render an unwanted vertical 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.
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!
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"> </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.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
69 thoughts on “Spacing Issues in Outlook 2007 and 2010”
Comments are closed.
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!
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
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.
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?)
Thanks a ton, this has been driving me crazy…
Inches! Seriously?
So glad I found this too. Its also been driving me nuts.
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.
I nearly cried when I found this. Thank you.
@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!
We are also having the same unwanted space issue.Can you please review my code?
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?
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.
@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
Another Tip. Vertical padding on
for vertical padding
Great article. Thanks very much!
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 1024×768 has more pixels than an inch at 800×600 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?
I found if a line height is set on the
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.
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:
Later on…
<!–[if !gte mso 9]><!—->
Extra tags on the if line are to prevent IE7/8 from rendering the error comment. Hope this helps someone!
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
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]>
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?
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.
Thanks for sharing the information with us.I also bookmark your site and visit it in future for more info.
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
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.
Thank you so much! Setting the height of the
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!
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:
@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:
https://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 😉
@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 🙂 https://www.emailonacid.com/app/acidtest/viewresult/B3sdq7KMJacvzoTf1i61XBtNRCE8FhKrYbZAa1XCotj2o
@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?
@Geoff, Thanks for your help on this. The only change I made was making the right align.
@jkeene1866,
I just ran that exact URL with no problems. Have you tried running the test again? Here is what I got:
https://www.emailonacid.com/app/acidtest/viewresult/JlzLLLvUk3an4Ao9fetrUA4aeQqv0Os6SIE1Pe0fsZmnl/CA
@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?
@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?
@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.
@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?
https://www.emailonacid.com/app/acidtest/viewresult/G8soYnmXYde9qqGkZXO0hwmejixK5hQUSoQvYjMqbJQH7
@Geoff, this is the html: …
THANKS.. i searched for like 1h over the internet for an answer to my problem and i found it here.. YOU’RE THE GREATEST!
My fix for this (after many hours of agony):
<!– End left-column content –>
<!–[if gte mso 9]>
<!– End right-column content –>
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.
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
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!”
Updated link for the Mike the Coder link: http://mikethecoder.tumblr.com/post/861597102/outlook-2007-screws-up-spacing-where-page-breaks-would
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
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 %).
Vedran’s answer worked for me. Thanks.
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! 🙂
Vedran’s fix worked! Thanks!!!
WOW! Thanks Vedran!
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!
Ajay – do you have a jsfiddle so we can see your code? Any links to screenshots of what the email should look like and how it is rendering?
This is mental. I believe it is common practice to have a containing table with height=”100%”.
If we cannot use a containing table (replacing it with a containing table on each block), but we use height 100% on each containing table the email looks riddiculous.
Does anyone have a solution for this?
Just try to optimize your code or put tables in different different raws of 100% table.
Very Simple Solution: Assess which row(s) has the max columns in your table. Let’s say it’s 4.
1. Leave all rows that are using 4
2. All other rows not equal to 4 or more than one need to be merged. How? Make 1
My explanation may be a little wordy, but it works every time.
Every few months I run into this issue and find myself googling “spacing problems outlook 2007 and 2010”. And every time it saves my ass.
Vedran’s solution worked for me. I had two tables side by side. When rendered in outlook the right table was being pushed down due to the spacing issue. After applying the conditional solution Vedran provided, no more spacing issue! And for an additional tip, to quickly check my html for issues, I just open it in ms word.
I have this email
three tables in a TD nested, when i do responsive email the OUTLOOK 2007, 2010, 2013 adds more space between the table, is there any idea to make MO not to do that. When its not responsive works fine.
My problem was as follows. The layout uses a centered wrapper table like
<body>
….
……..
and the styles
body
….margin: 20px 0
….padding: 0
table
….width: 600px
….@media only screen and (max-width: 620px)
……..width: 300px
Having very long content Outlook inserts a gap (a page break?) about every 1800px. The gap is a white line of about 20px.
Doing some trial and error I found out that changing the value of body margin made the gap growing and shrinking respectively. A body margin of 100px made the gap increase to 100px.
It seams Outlook inserts (repeats) the body margin on every “new page” after the page break. That is why the gap equals the body margin.
Thus my solution was to swap margin and padding values.
body
….margin: 0
….padding: 20px 0
That made the gap disappear but kept the top and bottom space.
Might help others with a similar setup.
One thing that I’ve always found incredibly useful in these cases is to test the email html code DIRECTLY IN WORD. You do this by saving as an html file and then choosing “Open With” Word. At that point, you’re able to see directly the issues on breaking space, table weird actions and spaces, etc.
For a recent time when we hit this problem exactly, Word was making two different columns within a row break differently so the right side broke and had additional vertical space above, but the left column did not.
Our solution was to edit in Word and edit in the table properties the “Allow Row to Break Across Pages” option and turn it off. That added a style value to the table row TR of
that page-break-inside:avoid seems to be the one that made the real difference.
I have coded many emails with 2 columns layout. I have not faced any problem with this kind of spacing issue. I’ll share you very soon about how I code HTML email.
Thanks
Vedran’s fix worked for me too – thank you! Tried so many things to fix this.
I tried the suggestions here and they didn’t work for my problem – nested responsive tables getting shifted around.
This is what will work. Always always apply a border to every table. If you don’t want it visible just make it 1px and white. This is the only fix that worked for me.
Great article! I looked everywhere for a solution to ‘the gap’ and couldn’t find anything. I was almost ready to give up when I found this article. Thanks!
Thank you!
I’ve been battling strange layout issues for hours and turns out the problem was a wrapping table that evidently stretched beyond the page break limit.
Who knew?!
When you’re building one-off static emails you can always tweak something (line-heights, padding, button heights etc) to find a way round this – but when you’re creating a master template that could have an almost infinite number of combinations of blocks it’s just luck as to whether this bug strikes or not on any particular email.
And even when Microsoft sort themselves out and stop using Word as a rendering agent for Outlook, we’ll still have this issue retrospectively.
@Sharon Jennings that is not entirely correct. I make MailChimp templates that can be pretty much any length. I ensure that each block is within a table and that table is not huge. It avoids this issue for some reason.
Just because it hasn’t happened yet, doesn’t mean it won’t… when you have an almost infinite number of combinations, you can’t be sure that you’ve just been lucky not to have hit it… I can go months / years without experiencing it, and then it’s suddenly happen. It’s ridiculously random!