Weird Gap in Outlook 2007 and 2010

Before I start, I think most of you may wondering what kind of issue are you saying. Check the image below. (In order to protect client's data, I did a gaussian blur...)

The screenshot of the rendering issue

See this gap beside the RED ARROW? The reason I put such a long screenshot is becuase it's only happening in long emails. And only happens in the design of more than one column. So in this case, it's two column.

So... before I start introducing you the way I fix it, I hope you have read this post first.

Spacing Issues in Outlook 2007 and 2010

Email on Acid is really a good place for Email Developers, I highly recommand you Google your issue on Email on Acid, as well as Campaign Monitor. (This is not an Ads...)

OK. The first thing you need to know is the render engine of the Outlook 2007/2010/2013 — their infamous Word rendering engines! So you should keep in mind that everything is acting like what Word act.

So talk about Word, you will find that Word is actually having a concept of Page. So if you see a weird gap in Outlook 2007/2010, simply open it with Word 2007/2010. If the email exceeds 1 page or more. Well, this post may works for you. Otherwise, the gap may cause by other reason.

Here is what you will see in Word.
Screenshot in Word (Before I collapse the gap)
Word Screenshot 1
Screenshot in Word (After I collapse the gap)
Word Screenshot 2

Obviously, the red arrow pointed out the gap. That's becuase the big "Learn More" button is pushed to the second page. So the bottom of the small "LEARN MORE" has some distence to the page bottom. And the gap created.

To elimate the gap, the simplest way is to get a screenshot of the current render issue. (Not in the Word but in the Outlook)
Screenshot of current render issue
Then calculate the gap height, do a reslice of the image. Add the gap height to the upper slice and cut off the gap height from the lower slice. For testing purpose, you can simply change the height of the upper image to be added with the gap height. And the gap will be gone.

Previous slice
Previous slice

Adjusted slice
Adjusted slice

Sometimes, if you can't slice the image, just try to adjust the padding's or the line height above the image. There is always a way that you can do to make the image bottom to hit the page bottom.

So here is the fixed result.
Fixed screenshot

This is a case of two column, one is image, and one is text. You may also meet three column, or four column. It depends on how you design the email. If both column is image, it's pretty easy, just reslice the image make sure their image bottom are on the same line. If both column is text, then it will be harder to work with, because each text is probably having a different line height. You should make sure that the bottom line of the last copy is on the same line. Here the bottom line that I mean is one of the four lines — top line, superscript line, base line, bottom line.

Okay! That's pretty much all for you. For the situation of having both column of text, I'll try to post another advanced tutorial for you the next time I see it. Thanks for you patience for reading this post. If you have any further ideas or advice, please email cyxjimmy@gmail.com.

Woody Chai

Woody Chai

I love HTML, CSS and JAVASCRIPT. I'm an developer working on SFMC (AMPScript, SSJS, SOAP/REST API). Love to work on all kinds of issues and dig out new technologies.

Read More