Outlook HTML Emails: How to Fix 11 Common Rendering Issues

If your line-height is less than your font-size, a negative mso-text-raise can prevent Outlook from cropping the text. All of this without affecting any other email clients than the Word-based versions of Outlook. If a link has padding only, it renders unpadded, but if it has both a border and padding, the it renders without a background color on the padding.

As we show above, you must add breaks inside of the content HTML. Unfortunately, this method is largely unused except for when adding spacing between text or forcing line returns in your content. Various email clients are known to read the line breaks at a different height, making it virtually impossible to create a pixel-perfect HTML email. The convenient thing about mso- prefixed properties is that they let you code self-contained hacks that you can save as snippets and drop into any template, without touching the stylesheet. Assuming your ESP doesn’t strip out unrecognized properties, this approach is also the least likely to cause any issues with inliners or the likes. Important declaration does override mso-padding-alt, but because Outlook ignores inline styles with !

To this day, its email client still sends shivers down the spines of email developers (developers developers…) around the world. Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings. With Email on Acid, you get unlimited email testing with every paid plan. You’ll also get deliverability and accessibility checks as well image and URL validation and many other valuable features. From Outlook.com, to Outlook 2010, to high DPI versions of Outlook 2016, a tool like Email on Acid’s testing tool lets you instantly see how your email is rendering across every version of Outlook. You’ll notice in the 11 tips and tricks above we often rely on MSO conditional code to get around Outlook’s tricky limited support.

MSO element

Important declarations, this only applies when overriding the padding from a stylesheet. This exact code actually works in the older versions of Outlook that were based on Internet Explorer. While Outlook doesn’t support the hover pseudo-class, you should still include it to create interactions to increase the accessibility of your email across other email clients. But don’t be surprised when your Outlook email is not displaying properly with the hover effect.

This may have a more drastic effect on how your email renders, so if you’re going to try this out it’s important to thoroughly test your email on all versions of Outlook. If you’ve exhausted your other options you can try this code snippet directly in your code’s head section. While many email developers may be salivating at the thought of a new and consistent version of Outlook, that version has only been released in Beta thus far. Further to that, it will take some time for companies to implement the new version. We expect the rollout to be a long and slow process so for now we’ll have to continue fighting the good fight against the older versions of Outlook.

Conditional stylesheet

Percentage values may produce unexpected results (see the second example below). As you can see, developing for Outlook can get really cumbersome. And because you need to support a wide variety of email clients, you might want to double down on testing. With Notificare, you can test all your email messages and templates, on real devices, in more than 90 email clients. Get rid of those nasty rendering bugs with confidence by using our Email Proofing feature. Make sure elements like margin, height, font-size, and line-height use an even value of pixels, and that might just save you some trouble.

• The MSO email clients include Outlook desktop app on Windows, and Windows Mail the rendering of these apps is based on Microsoft Word.
• In most email clients, this code renders as a link with a background color, a thin border, and padding.
• The solution is simple – we turn back to our trusty old friend the Ghost Column fix.
• This requires setting a mso-element-frame-height, mso-element-frame-width or mso-element-wrapto make the vspace work.

You can also try manually changing heights, font sizes and line-heights to achieve the same outcome. For some folks, the fix is as simple as changing font sizes from odd numbers to even numbers. For example, if you have a font size of 13px or 15px, try converting it to 14px. Finally, make sure to include any set widths as CSS properties with pixels and not as an attribute on your tables.

Controlling line height in Outlook.

This means wrapping more images, paragraphs, and basically anything with a table and applying margin or padding styles to those. However, there isn’t quite as much support for the margin property as there is for padding with CSS. According to Can I Email, using margin could business budget create problems in many versions of Outlook. And, be aware that Gmail doesn’t support margin with negative values. If you want your background images to work on Outlook 2016 and other older desktop versions you’ll need to dive into the world of Vector Markup Language (VML).

For example, to vertically center the text within the line-height, set mso-text-raise to the difference between the font-size and the line-height, divided by two. Padding is stored in the mso-padding-alt attribute if the normal HTML padding attribute does not apply. But by using an .mso prefixed selector, we can override the font-family to an Outlook safe choice like the generic sans-serif family, without affecting other email clients. The most common way to code Outlook targeted CSS is by placing an embedded stylesheet inside a conditional comment. If it wasn’t for Outlook we’d be able to ditch the tables and embrace the . Tables have long been the standard for email developers, but as email standards catch up to web standards, more and more developers are ditching table-based layouts in favour of divs with ghost tables.

MSO advanced text styles (Word Art)

Those are the approaches I use to code CSS that targets Outlook only. As with all email hacks, neither one is a universal fix, but hopefully one of them will help the next time Outlook is giving you a hard time. Then there are the mso- prefixed properties that don’t https://online-accounting.net/ correspond to a CSS equivalent, but to an Office feature. Many of these have no effect on Outlook, whereas others have almost too much of an effect. Hat tip to Joshua Hughes at FreeAgent who originally showed me his faux padding technique that inspired this version.

Whether you’re just starting to work with Outlook or a master marketer able to summon CSS classes at will, with these tools, you’ll be able to charm even the most unruly Outlook inbox. It is Microsoft’s version of SVG, but the language has been depreciated and is very rarely used (yay, email!). Microsoft does have the documentation for VML archived online, so you can still look up how to use it to create vectors in Outlook, where it is still supported. Theoretically, when Microsoft transitions to it’s “One Outlook” model, we’ll be able to leave VML behind. Elements both with a border, you may only see an outer border around both elements and not between them. To fix this we can set a border between them, this could also be set as a different value.

Make sure to include ALT text; Outlook doesn’t display images by default unless people turn the feature on. The key takeaway is that we’re working with two different rendering engines—Word and Webkit. Neither is necessarily good or bad, they just require different approaches and have different quirks that need to be taken into consideration. When using mso-elements you’ll see a border appear around the first element used. I’ve not worked out how to remove this yet but we can set another element first that will take the boarder then move that out of the way. Although it's not the worst thing in the world, for those of you striving for perfection, this bug might really become annoying.

• According to Can I Email, using margin could create problems in many versions of Outlook.
• With Email on Acid, you can preview your work on dozens of major email clients and devices.
• If you want your background images to work on Outlook 2016 and other older desktop versions you’ll need to dive into the world of Vector Markup Language (VML).
• To fix this we can set a border between them, this could also be set as a different value.

If you’ve spent any time in the email world you’re probably aware of Outlook’s reputation. Often referred to as the problem child of the email world, Outlook has been the cause of many frustrations, missed deadlines, and headaches for email developers, designers, and marketers around the world. Outlook has long been the bane of email marketers, but it doesn’t have to be.

MSO text styling

There are ways to target the web clients as well, though no way to target one Outlook web client over the other. So when you target Outlook.com, you’ll also target the Office 365 web client (but not the desktop client). On Windows computers, there’s a global setting that people can change (or in some cases, are set higher by default) that scales up the text and graphical elements to make them larger and easier to read. This is great for accessibility, but not so great for Outlook (some elements are scaled up while others aren’t). In January 2021 , Microsoft announced their “One Outlook” vision to replace the desktop clients with one client that works everywhere. As of May 2022, this version of Outlook was available to Beta Channel users, and as of April 2023, it is available in the Windows App store.