If you’ve ever had to code an email template…you know that Outlook sucks.
It’s the Internet Explorer of email clients.
TL;DR: The issue might be solved by adding align left to its parent table, or the parent table of the whole email. Other potential solution is to add mso-table-lspace and mso-table-rspace to the aligned table (though this didn’t work for me)
Basically, like IE, you have to write extra markup or specifically write your markup in such a way that Outlook can read it properly. What’s even better is each version that comes out has its own quirks. Outlook on Windows is completely different, and worse in my opinion, than Outlook on Mac. On the contrary, Outlook for iOS is actually pretty good.
There are many articles out there outlining what you need to do to get around the various shortcomings of Outlook. What I’m here to complain about today is one issue in particular, which took me quite a bit of time to fix.
The Issue
While re-coding a newsletter template to be responsive, I ran into a particularly odd issue with Outlook and floats. Well, first of all, Outlook doesn’t support floats, but it does support the align attribute on images and tables. Secondly, the wrap was…weird.
At first glance, everything appears fine. Then I noticed that around the floated table, each line of text had its first character being cut off or covered by some magical border around the table.
My first thought? “What the hell?”
So, I entered debugging mode…for like 4 hours.
Debugging Process
Is there a border on the table?
—No
Is it the table, or the image?
—The table
Does it happen if I align it to the right as well?
—No, align right works as expected
If I nest another table within the aligned one, does the issue still happen?
—Yes, nested table does nothing
What if I wrap the text afterward in a div, maybe it will sense the container and fix itself?
—Ha! No. Outlook doesn’t like div tags
…Is there some sort of special issue with Outlook and aligned tables? (Googling ensues)
—Yes
What are some solutions to this issue that others have come across as well?
—Try an Outlook specific property, such as mso-table-lspace and mso-table-rspace
Some people said mso-table-rspace 6 or 7 pt worked, did it work for me?
—HAHA! No (it literally changed nothing for me)
Walk away and cry for a bit
Are there any other solutions to this issue?
—Yes, sometimes aligning the parent table to the left works
I added align left to the conditional table that encapsulates everything, did that work?
—OH MY GOD YES! YESSSSSSS! *tears of joy*
The Solution
As it turned out for my use case, the solution was to add align left to the parent table of the entire page. Just inside the opening body tag of my email template, I have an Outlook conditional that will only be applied if it is Outlook. What that code does, is add an all containing table that is full width of the document (or client).
It looks like this:
<!--[if mso | IE]>
<table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #ffffff;">
<tr>
<td>
<![endif]-->
Within that, I have my actual body containing table that is centered and restricted to 600px width for reasons and such.
For whatever reason, in the logic that is Outlook, this fixed the issue.
Why? I have no idea.
In case you are curious, here is a sample of how the whole thing looked, stripped down for obvious reasons:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" />
<title>Responsive Email Test</title>
<!--[if mso]>
<style>
* {
font-family: Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #ffffff;">
<center style="width: 100%; background-color: #ffffff;">
<!--[if mso | IE]>
<table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #ffffff;">
<tr>
<td>
<![endif]-->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: auto">
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="padding: 0 10px 5px 0">
<img src="https://via.placeholder.com/600x" width="300" height="" alt="" border="0" style="width: 100%; max-width: 300px; height: auto;" />
</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem enim, varius sed lectus vel, dictum vehicula tellus. Maecenas pellentesque bibendum molestie. Aliquam erat volutpat. Sed eu risus laoreet, efficitur tellus vitae, dignissim massa. Aenean consequat accumsan viverra. Quisque et gravida turpis. Nullam gravida porta leo id feugiat. Etiam porttitor luctus risus eget congue. Nullam efficitur fringilla tristique. Suspendisse ut turpis eu urna consectetur sagittis. Curabitur quis felis a neque lacinia tempus a sit amet purus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem enim, varius sed lectus vel, dictum vehicula tellus. Maecenas pellentesque bibendum molestie. Aliquam erat volutpat. Sed eu risus laoreet, efficitur tellus vitae, dignissim massa. Aenean consequat accumsan viverra. Quisque et gravida turpis. Nullam gravida porta leo id feugiat. Etiam porttitor luctus risus eget congue. Nullam efficitur fringilla tristique. Suspendisse ut turpis eu urna consectetur sagittis. Curabitur quis felis a neque lacinia tempus a sit amet purus.</p>
</td>
</tr>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</center>
</body>
</html>
Conclusion
Outlook is a headache. We all know this.
As you read this, you may or may not have a clever solution that is better than mine or even an explanation for why this “fix” works. Good for you! If you feel like sharing, feel free to contact me, I love to learn.
Some of you may have wondered at some point, “Why not just align the image left? You said that Outlook supported align on image tags, right?” Yes, you are correct. You can do that. However, you can’t control padding or margin on the image tag…so the text just bumps right up against it. It was worth the shot, though.
I hope you enjoyed my rambling, and found it helpful.
Thanks for reading, and may all your emails work in Outlook.