Sam Johnston - Interactive Email Developer

Sam Johnston

I design and code responsive websites and emails, specialising in interactive email and CRM workflow optimisation.

Outlook: Page Break Fixes (Spacing issues)

Outlook: Page Break Fixes (Spacing issues)

We all know that the Outlook desktop client can be a real pain to code for. As I’ve moved into coding more and more interactive, kinetic emails I consistently find that it’s Outlook that I have to go back to and apply fixes for.

Whats wrong with Outlook?

Before detailing the fixes, I want to talk about why Outlook sucks for email developers, it’s been said a thousand times before but for continuity I want to detail it once more (sorry).

Outlook uses the word rendering engine to paint emails. This means that anything over 23.7 inches will be broken in two, outlook doesn’t discriminate; it will break your email in half and honestly, it just doesn’t care about you. In fairness what it’s trying to do is seemingly logical. It’s saying, “If the user was to print this document I’m going to need to break it, here, here and here”. Over the years I’ve seen multiple variations of this error but luckily the fixes are always the same.

So? How do I fix it?

First things first. You need to reset paragraph tags in your embedded styles. Now I wouldn’t recommend using these in emails anyway, although they do have their uses. We’ll be doing this not because you’ve laid your email out using them, we’re doing it because when outlook breaks your email, it inserts either a paragraph tag, or a break. This will fix the former.

I wrap it in conditional code like this, (please note that margin is case sensitive):

1
2
3
4
5
6
7
8
<!--[if gte mso 9]>
<style type="text/css">
p {
padding:0px;
Margin:0px;
}
</style>
<![endif]-->

You can also apply this on the table row where the break is occurring. This usually helps on table’s with multiple columns.

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

And lastly you’ll want to break the email into multiple stacked tables so that nothing renders longer than 23.7 inches.

Hopefully doing all that will stop you pulling your hair out!

Comments