The top 13 Outlook HTML email display issues (& how to fix them!)

If you’ve ventured into the email realm, you’re probably no stranger to the quirks of Outlook. It’s that one friend who’s consistently late to the party, causing email developers, designers, and marketers worldwide to collectively sigh. Outlook has earned a reputation as the problem child of the email world, responsible for its fair share of missed deadlines and headaches.

But, hey, it’s not all gloom and doom! Outlook might be frustrating, but it’s reliably frustrating. (Is that comforting? We’re trying to make it comforting.) Crafting emails that shine on this challenging platform is pretty much a rite of passage for email creators and developers. It’s where we learn to think outside the box, turning a perfectly aligned button into a badge of honor and a rebellious table into a testament to our problem-solving skills. Yes, Outlook throws curveballs, but isn’t that what makes life exciting?!

(If you’d rather things just worked…check out an internal email platform like Workshop instead! We’ll work with you to fine-tune your email templates to resolve a lot of these problems.)

For now, join us as we embrace the intricacies, share insights, and equip ourselves with the tools to conquer Outlook’s challenges!

The top 13 issues with HTML emails in Outlook

Before we embark on this journey to create emails that shine on Outlook, let’s understand why Outlook can be such a pain in the you-know-what.

Outlook’s main problem, behind all of these issues, lies in its inconsistent rendering across versions. Outlook just does not know how to properly render HTML like other email platforms, which is why the email often looks completely fine in your email editor and not so great when it arrives in your employee inboxes.

Here are the top 13 issues we troubleshoot within Outlook:

1. Random White Lines

Outlook’s most infamous issue. These seemingly random white lines can be SO maddening. While there are “fixes” for the issue, Outlook will render the email differently on different screens. We’ve found that many times, even if you make it look perfect on your computer, if someone is using a different screen size than you, they will most likely see different lines.

The fix: This is a tough one. We’ve seen it happen for years with seemingly no rhyme or reason…and disappear just as quickly. While the exact cause remains a mystery, it often relates to heights being odd numbers.

Quick fixes to try: 

• Make sure font-size, line-height, padding, margin and any other coded pixel numbers are even instead of odd (seriously)
  
• Update the content or column backgrounds from transparent to whichever current background color is selected
• Add a ghost break (here’s a how-to on that)

But really, it could also be an issue with padding, transparency, screen resolution/size, or Outlook versioning. If this is something you’re consistently running into, working with a dedicated internal email platform like Workshop can 1.) give you direct access to a support team to help you troubleshoot it and 2.) reduce the amount of times you run into this issue in the first place!

2. Animated GIFs

Older Outlook versions don’t play nice with animated GIFs. These GIFs work beautifully in most email clients, but when you open it in Outlook, all you see is the first frame of your GIF, leaving your message incomplete and your readers confused.

The fix: Ensure crucial information appears in the first frame, or use fallback images.

3. CSS Background Images

Most desktop versions of Outlook don’t support CSS background images. That means that if you meticulously design an email with a stunning background image, you’ll soon realize that Outlook users won’t see it at all.

The fix: Consider using Vector Markup Language (VML) for background images.

4. Ignoring Margin and Padding

Outlook can be finicky with margins and padding. Let’s say you set your email’s padding to perfection, ensuring every element has the right amount of space. However, when your recipients open the email in Outlook, that carefully crafted padding vanishes, making your email look cramped and unprofessional.

The fix: Some versions remove padding, so use margins if possible. For <div> tags, employ the ghost column technique.

5. Adding Borders to Table Cells

Outlook 2016 adds an unwanted 1-pixel border around table cells in emails. A lot of times, your email’s layout looks seamless in most email clients, but in Outlook 2016, a pesky 1-pixel border appears around each table cell, throwing off your design’s aesthetics and alignment.

The fix: Many articles will recommend trying “border-collapse: collapse;” to eliminate it, but we’ve tried this a few times and it’s not completely reliable. In Workshop, you can use this by adding in an HTML block and using the style tags inside:

<style>
...
</style>

6. Ignoring Link Styling

Outlook may strip styling from <a> tags without an href value. If you have a nicely styled link, this could mean that when you check your email in Outlook, your link styles vanish, making your links appear plain and uninviting. Classic Outlook.

The fix: Use placeholder links with “http://” or “https://,” or wrap <a> tags in <span> elements for styling.

7. Resizing Non-Native Images

Outlook won’t respect CSS for resizing images. Rude! Even when you try to resize the image, Outlook will decide to ignore your CSS, leaving your images in their native dimensions and disrupting your email’s layout.

The fix: Define width in HTML to ensure proper proportions.

8. Ignoring HTML Item Width and Height

Outlook doesn’t support styling inside <div> tags.

You attempt to style <div> tags within your email for better layout control. However, Outlook disregards your styling efforts, causing your email to lose its intended structure and appearance.

The fix: Use tables instead.

9. Font Stacks and Times New Roman

Outlook can default to Times New Roman if a custom font is at the top of the font stack.

You carefully select a custom font stack for your email, wanting to give it a unique and branded appearance. But when you open it in Outlook, all your efforts are in vain as it defaults to the ubiquitous Times New Roman font, diminishing your email’s distinctiveness.

The fix: Employ attribute selectors or MSO conditional code to fix this.

10. Controlling Line Height

You strive for consistent line heights throughout your email, creating a polished and readable look. However, Outlook occasionally throws your line spacing off, making your email appear messy and unprofessional.

The fix: Use “mso-line-height-rule:exactly;” for consistent line heights in Outlook. In Workshop, you can use this by adding in an HTML block and using the style tags inside:

<style>
...
</style>

11. Email Alignment Issues

You craft a responsive email design that’s meant to stack columns neatly on mobile devices. However, when you open it in Outlook, columns misalign and disrupt your carefully planned layout.

Why Workshop is the best tool for creating & sending internal HTML emails

Obviously, a lot of these issues are focused on how emails render in Outlook, but the problems with using Outlook for internal communications don’t stop there. Of course, that’s an entirely different post. Should you use an Outlook plugin for internal communications? Dig into the answer here.

You can also get a really quick demonstration of how Workshop compares to your current tool (whether you’re sending straight out of Outlook or using a plugin-based solution). Just select a time that works for you here!