Outlook HTML Emails: How to Fix 11 Common Rendering Issues
There’s one in every family, classroom, and summer camp: A problem child or a black sheep, someone who requires extra attention until they get set straight. For email developers, that troublemaker is Outlook.
Email developers have the same feelings about Microsoft Outlook as web developers once had about Internet Explorer (RIP). Just the thought of developing Outlook HTML emails and troubleshooting problems might stir up frustrating memories and give you acid reflux.
Outlook inboxes have a reputation for rendering emails inconsistently and lacking support for features that email marketers want to use. Some of those Outlook issues have been fixed over the years, but others persist.
Why do we continue to put up with it? Because we have no choice! Outlook represents one of the “Big 3 email clients,” trailing only Apple Mail and Gmail in popularity. Plus, Outlook usage is prominent among B2B email subscribers.
Bottom line? We’re stuck with it.
Let’s take a look at how to code Outlook HTML emails by diving into the most common rendering problems as well as some ways to solve them.
Jump to a section in this article:
- Outlook adds unsightly lines to emails
- Outlook and animated GIFs
- Outlook ignores margin and padding on images
- Outlook adds a border to table cells
- Outlook ignores link styling
- Resizing non-native images in Outlook
- Outlook ignores HTML item width and height
- Font stacks and Times New Roman
- CSS background images not supported
- Controlling line height in Outlook
- Alignment issues in Outlook
11 tips for Outlook HTML email development
So why does Outlook cause so many problems for email developers?
As you read through this list, you’ll notice that many of the worst issues are limited to the Windows desktop versions of Outlook (2007-2019). That’s because these clients use Microsoft Word as their rendering engine. Conversely, Outlook.com, Outlook mobile apps, Outlook for Mac, and the online version of Outlook 365 use WebKit, which is much more reliable for rendering HTML emails.
That’s why things like animated GIFs and the use of certain media queries work in some versions of Outlook, but not in the Windows desktop versions.
While this isn’t an exhaustive list of the headaches that Outlook email coding can cause developers, it includes the biggest blockers standing in the way of email campaigns that render as expected.
1. Outlook adds unsightly lines to emails
This is easily one of the most notorious struggles with Outlook email development. The client will sometimes add a 1 px line in between elements. Here’s an example of how it looks.
The lines inherit the color of the background in an email’s <body>. While it may not be the worst thing in the world, it looks unprofessional and degrades the email experience, especially if a bunch of these lines appear.
This problem seems to occur randomly and was most prevalent in Outlook 2016. A few years ago, Email on Acid theorized that it could be caused by odd-numbered heights.
So how do you fix this Outlook HTML email bug? We’ve suggested a few fixes in our article on getting rid of lines in Outlook emails:
- Adjust heights and font sizes: Try changing from odd to even numbers. Simply switching from a 15px to a 16px font-size could make the lines disappear.
- Add ghost breaks: This is a way to force line breaks in problem clients that is similar to ghost columns, which are used to fix alignment issues.
- Use non-breaking spaces: Try placing an before closing a table cell.
- Match the background color: Cover up the lines in Outlook when you change the background to the same color used in the section/table.
- Microsoft specific code: Add the snippet below to the email’s head. It targets Outlook and collapses table borders.
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important; }
</style>
<![endif]-->
Developer Holly Bourneville also recommends using images with even-numbered pixel widths and heights. Grab more code snippets for the fixes listed above and find out what works.
2. Outlook and animated GIFs
The relationship between Outlook emails and animated GIFS is, well, complicated. But it’s improved quite a bit over the years.
While GIFs were a no-go in Outlook for quite some time, in 2019 Microsoft announced that an updated version of Outlook 365 would have GIF support. Can I Email now indicates that animated GIFs work on every Outlook client other than the older Windows desktop versions (2007-2016).
In those cases, Outlook will display only the first frame of an animated GIF. For that reason, the common advice is to make sure you start your GIF with a frame that looks acceptable. If your GIF includes a call-to-action or important information, be sure it’s on that first frame.
You could also target Outlook clients and display an entirely different still image instead. Get the code and find out how this alternative solution for GIFs in Outlook works.
3. Outlook ignores margin and padding
Nailing the spacing of HTML emails has been a particularly tough challenge for email developers, and Outlook is one of the worst offenders.
Certain versions of Outlook will remove padding in a variety of situations. One of the most common involves image padding, which when ignored can cause text to appear flush against an image. To get around this, wrap the image in a table with margin, padding, or cellpadding depending on how much space you need.
In general, it’s safe to use margin or cellpadding with Outlook. This may require you to use even more nested tables. Learn to love them! You could also use images with a border of built-in padding around them, but that may result in too much padding in other email clients.
Desktop versions of Outlook don’t support the styling of <div> tags. That means any padding specifications contained in a <div> are pointless. Outlook only respects <table>s, so keep any spacing specifications to those.
Get more guidance on email spacing techniques and discover some tips for margins and HTML email padding.
4. Outlook adds a border to table cells
A bug in Outlook 2016 adds a 1-pixel border around table cells in emails. This may not be a major problem unless you need your email template to line up perfectly.
To get rid of this extra border, use “border-collapse: collapse;” embedded or inline. This CSS property indicates whether cells have a shared or separate border. Setting the property to the collapse value means it combines to a single border.
5. Outlook ignores link styling
There are a couple of situations where Outlook will not apply styling you’ve applied to hyperlinks in an email. One is the rare case when you use an <a> tag without an href= attribute, which could be to use them as placeholders or anchors.
If you want Outlook to recognize the link styling in this situation, just wrap the link in a <span> and style the span.
Outlook also removes link styling if you add a URL without http:// or https:// in your links.
You might use URLs without the http:// or https:// protocol if you’re coding up a new email template or sending a campaign out for review before a URL is live. This can really mess things up if you’ve styled a button link. Outlook throws out your styles and it will look broken.
To avoid this issue, be sure even placeholder and template links include the protocol. Otherwise, you’ll need to re-add styling to those links.
6. Resizing non-native images in Outlook
You can’t use CSS to resize images in Outlook HTML emails. If you do, you may end up with something that looks warped and ugly.
If your images are not displaying in their native size (the size they were saved at), make sure to define the height and width using HTML attributes and they will render properly. If you specify the width, Outlook will resize the height accordingly, so the image is not warped. For example:
<-- This image will be resized to 300px in Outlook --> <img src="https://www.emailonacid.com/images/photo.jpg" width="300" style="width:300px;" /> <-- This image will NOT be resized in Outlook --> <img src="https://www.emailonacid.com/images/photo.jpg" style="width:300px;" />
While other email clients will read the style to determine the width, Outlook only reads the HTML attribute. So, define both.
7. Outlook ignores HTML item width and height
As we’ve already mentioned, Outlook doesn’t support styling inside of <div> tags.
So, when an email renders in Outlook, the <div> sections will assume the height of the text inside of them, and 100% width, even if you specify a height/width for them in code.
Once again, the fix for Outlook HTML emails is to use tables instead. We have seen this with a few other elements, but the <div> situation is the most common problem.
8. Font stacks and Times New Roman
When specifying fonts in email marketing, developers use font stacks to list the preferred typefaces that the client should render. The problem is, If you include a custom font at the top of your font stack, Outlook will ignore all of your fallback fonts and instead display Times New Roman. (Not cool, Outlook!)
We explain a few ways to fix this problem in our article on Outlook and font stacks.
- Fix 1: Replace the stack using attribute selectors.
- Fix 2: Wrap text in a span.
- Fix 3: Add MSO conditional code.
- Fix 4: Specify a custom font in a media query.
Another option we recommend for Outlook 2016 and 2019 is adding media=“screen” to the web font link that you’ve specified in the font stack.
Fix 1 was the most popular among email geeks who submitted their own solutions to Email on Acid. It works because Outlook ignores attribute selectors.
Write your font stack, just as you normally would, but put your custom font last in the list. Then include the following code in your CSS: “[style*=”CustomFont”] { font-family: ‘CustomFont’, Helvetica, serif !important; }” This code will tell the email client to replace any style that includes the custom font with the correct stack:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
div {font-family: Helvetica, sans-serif, 'Tangerine';}
[style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; }
</style>
</head>
<body>
<div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Making Email Beautiful!</div>
<div style="font-family: Helvetica, serif;font-size: 48px;">Helvetica</div>
<div style="font-family: 'Times New Roman', serif;font-size: 48px;">Times New Roman</div>
</body>
</html>
Check out the full article to get code snippets for the other three fixes.
9. CSS background images not supported
While you can use CSS background images with Outlook.com and Outlook 365, they are not supported in most desktop versions of the client.
Image backgrounds coded with the CSS property background-image may be problematic as well. Outlook 2016 and other older versions of the email client can’t handle normal image backgrounds.
To make backgrounds work in older versions of Outlook, you’ll need to use some Vector Markup Language (VML).
10. Controlling line height in Outlook
At one time, emails were rendering taller than expected in Outlook.com because the client was controlling line-height using CSS. That’s not so much of an issue anymore.
Microsoft Office styles (MSO styles) will tighten up your lines just a bit. If your spacing seems off, give it a try. Add “mso-line-height-rule:exactly;” directly before the line-height style, inline or embedded.
11. Alignment issues in Outlook
Yet another common problem in various versions of Outlook occurs when developers create two-column. responsive email templates that are meant to stack on mobile devices.
Some desktop versions of Outlook try to stack content in the columns as well. The result is an email that’s out of alignment and may look something like this:
To fix this Outlook HTML email bug, developers can use what’s known as fluid hybrid design for responsive emails. This involves using ghost tables, which are invisible to clients other than Outlook, and constrain columns so that they display as intended.
Get code snippets and an in-depth explanation of how to use ghost tables to fix Outlook alignment issues.
The reason you test before you send
Email development gets complicated quickly, and for many email developers, dealing with Outlook tops their list of reasons why.
They say ignorance is bliss, but wouldn’t you rather know when Outlook is messing up the campaigns you’ve coded? We built the Email on Acid platform to simplify the complexities of email marketing.
With our reliable email previews, you can run unlimited tests and catch problems with Outlook HTML emails before they go out to customers and subscribers. Email on Acid gives you the power to see into the future and fix things first.
This post was updated on October 12, 2021. It was also updated in February 2019, April 2018, and originally published in September 2015.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
4 thoughts on “Outlook HTML Emails: How to Fix 11 Common Rendering Issues”
Comments are closed.
CSS Will Not Resize Non-Native Images
doesn’t seem to work either. Any way around this? I want to keep a date and a time from not separating onto 2 lines.
I have an issue with br-Tags. This tags are visible in mails from user inputs (textarea field from contactform).
I use nl2br() in PHP. Every mail program has not this problem. Only Outlook 2016!
What can I do?
Great article, thank you for putting it all together for all of us who have to endure these outlook caveats. Just one thing, your example for lists is missing some end tags.