Rendering issues of emails in Outlook: causes and technical solutions

The desktop versions of Outlook (2007-2019) utilize the Microsoft Word rendering engine to display HTML emails, which drastically limits support for modern web standards and creates recurring display issues. This legacy architecture forces email developers to adopt specific coding techniques: table-based layouts, MSO conditional comments, and VML (Vector Markup Language) to circumvent CSS limitations. The web versions (Outlook.com, Microsoft 365) and the New Outlook (2023+) use WebKit/Blink engines offering better compatibility, but 60 to 70% of business users still rely on problematic desktop versions.

Why does Outlook cause so many rendering problems?

Microsoft made the architectural decision to use Word as the HTML rendering engine in desktop versions of Outlook since 2007, replacing Internet Explorer used in Outlook 2003. This technical decision, justified at the time to unify the display between email composition and reading, now creates major incompatibilities with modern HTML.

The Word engine only understands a limited subset of CSS and completely ignores advanced properties like flexbox, grid layout, or pseudo-classes like :hover. According to Email on Acid, this fundamental limitation explains 80% of the display bugs encountered by email developers. The affected versions include Outlook 2007, 2010, 2013, 2016, 2019, and certain configurations of Microsoft 365 in desktop mode.

Conversely, Outlook for Mac uses WebKit (the Safari engine), Outlook.com, and Office 365 web use Blink (Chrome engine), and the New Outlook for Windows (launched in 2023) abandons Word in favor of a modern web engine. Microsoft plans to end support for the Word-based desktop versions in October 2026, marking the end of a problematic era for email developers.

The 8 most common rendering issues in Outlook

Margins and padding ignored or removed

Outlook desktop outright removes margin and padding properties applied to images and <div> tags. To compensate, developers must apply padding directly to the table cells <td> that surround the elements, not to the elements themselves. The “ghost columns” technique involves creating empty columns in tables to simulate horizontal margins.

CSS background images not supported

The CSS property background-image only works in Outlook.com and Microsoft 365 web. Desktop versions (2007-2019) require the use of the obsolete but still supported Microsoft VML (Vector Markup Language) interpreted by Word. The VML code must be encapsulated in MSO conditional comments to prevent affecting other email clients.

DPI scaling issues (120 DPI)

On Windows, users can set a DPI scaling to 120 for better readability. Outlook inconsistently applies this scaling: point (pt) values are enlarged, but HTML width/height pixel (px) values remain unchanged. The result is distorted images, misaligned layouts, and disproportionately sized text. Litmus estimates that 35% of professional Windows users use scaling greater than 100%.

<div> tags and CSS ignored

Outlook desktop completely ignores width and height properties applied to <div> tags via CSS. <div> containers automatically take the height of their textual content, breaking intended layouts. The only reliable solution is to use HTML tables (<table>) for layout structuring, a practice considered outdated on the web but essential for email.

Broken line-height and inconsistent vertical spacing

The CSS property line-height is interpreted differently by Outlook, creating unpredictable vertical spacings. The solution is to add the specific MSO property mso-line-height-rule: exactly; before each line-height declaration to ensure precise rendering. Without this directive, Outlook applies its own spacing calculations based on the font used.

Animated GIFs stuck on the first frame

Outlook 2007 to 2016 does not support GIF animations and only displays the first frame of the image. Marketers should place critical elements (call-to-action, main message) on the first frame to ensure the essential information remains visible. Outlook 2019 and later versions support animated GIFs, but the installed base of older versions remains significant.

Custom fonts replaced by Times New Roman

When a custom or web font is placed first in a CSS font-stack, Outlook ignores all fallback fonts and defaults to Times New Roman. The recommended solution is to use CSS attribute selectors [style*=”FontName”] with !important to enforce fallback fonts or to encapsulate the text in <span> tags with inline styles.

Random white lines in layouts

Phantom white lines randomly appear between table cells, especially when the heights are expressed in odd pixels (13px, 15px, 17px). Solutions include converting all heights to even values, adding “ghost breaks” (conditional comments with <br>), and applying border-collapse: collapse; on all tables with the specific MSO directive mso-table-lspace: 0pt;.

Technical solutions: MSO conditional comments

MSO conditional comments allow specifically targeting Outlook versions and applying code only for these clients, without affecting Gmail, Apple Mail, or other email clients. The syntax uses commented HTML tags with conditions based on MSO (Microsoft Office) version numbers.

Each Outlook version corresponds to a specific MSO number: Outlook 2007 = mso 12, Outlook 2010 = mso 14, Outlook 2013 = mso 15, Outlook 2016/2019/Microsoft 365 = mso 16. The conditional operators include gte (greater than or equal), lte (less than or equal), gt (greater), lt (less), and eq (equal). This technique remains the most reliable method for handling Outlook-specific quirks.

Example code to target Outlook 2013 and later versions:

<!--[if gte mso 15]>
<style type="text/css">
table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
</style>
<![endif]-->

This code applies specific reset styles only in Outlook 2013+, invisible to all other clients. The property mso-table-lspace: 0pt; removes the default spacing added by Outlook around tables, while border-collapse: collapse; eliminates unwanted 1px borders added by Outlook 2016.

VML: creating Outlook-compatible background images

VML (Vector Markup Language) is a vector markup language developed by Microsoft in the 1990s, now obsolete everywhere except in the Word rendering engine of Outlook. To display background images in Outlook desktop, developers must create VML vector rectangles with three key elements: <v:rect> (the rectangular shape), <v:fill> (the background image and fallback color), and <v:textbox> (the HTML container for overlaid content).

The VML structure must be declared in the <html> tag with the namespace xmlns:v="urn:schemas-microsoft-com:vml", then encapsulated in MSO conditional comments so that only Outlook 2007-2019 interprets this code. According to Beefree, this technique delivers “bulletproof” background images compatible with 100% of email clients.

Example VML code for a full-width background image:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="frame" src="https://example.com/background.jpg" color="#333333" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>Standard HTML content visible in all clients</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

The property color="#333333" in <v:fill> sets a fallback color in case the image does not load. The attribute type="frame" stretches the image to fill the entire rectangle without distortion. This dual approach (VML for Outlook + CSS background-image for others) ensures consistent rendering across all clients.

DPI fix: normalize scaling to 96 pixels per inch

To resolve DPI scaling to 120% issues, Outlook must be forced to use a standard pixel density of 96 PPI (pixels per inch) instead of applying the Windows system scaling. This correction is achieved by adding an XML block in the email’s <head> section, encapsulated in MSO conditional comments.

The following code normalizes rendering for all Outlook versions since 2007:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

The tag <o:PixelsPerInch>96</o:PixelsPerInch> explicitly sets the pixel density, preventing Outlook from converting px values to pt with scaling. The directive <o:AllowPNG/> ensures full support for PNG images with transparency. This fix resolves 90% of image distortion issues on Windows systems configured at 120 DPI or 144 DPI.

It is also necessary to add inline styles with pixel (px) values on all tables and cells: width="600" style="width:600px;" to ensure dimensions remain consistent even after applying the DPI fix.

Best practices for Outlook 2026-compatible email code

Adopt a table-based HTML architecture for the entire layout structure, completely abandoning <div> for main containers. Use nested tables to create columns and sections, with explicit width attributes on each <table> and <td>. Outlook desktop versions require this “old school” approach to ensure predictable rendering.

Consistently apply CSS in inline directly in HTML tags with the style="" attribute, as Outlook removes or ignores external stylesheets and <style> tags in some configurations. Use both the HTML attributes (width="600" height="400") AND the CSS properties (style="width:600px; height:400px;") on images to maximize cross-client compatibility.

Implement a specific Outlook CSS reset in the <head> section with MSO conditional comments including: table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }, img { -ms-interpolation-mode: bicubic; }, and p { margin: 0; mso-line-height-rule: exactly; }. This reset neutralizes problematic default styles added by Word.

Systematically test your emails on multiple Outlook versions before sending: Outlook 2010, 2013, 2016, 2019, Microsoft 365 (desktop and web), and 120 DPI configurations. Professional tools like Litmus Email Testing and Email on Acid offer real-time previews on over 100 clients, including all Outlook variants, with screenshots and automatic rendering issue detection.

Testing and validation tools for Outlook

Litmus Email Testing is the market leader with previews on over 100 email clients, including Outlook 2007, 2010, 2013, 2016, 2019, Microsoft 365 desktop, Microsoft 365 web, Outlook.com, and Outlook for Mac. The platform generates real screenshots from Windows virtual machines and offers an automatic analysis system detecting specific rendering issues (missing images, broken layouts, incorrect fonts).

Email on Acid offers similar features with a focus on technical debugging: HTML code inspection, deliverability validation, spam score testing, and Outlook previews with different DPI configurations (96, 120, 144). The tool also offers a “Broken Email Validator” that automatically identifies CSS properties not supported by Outlook and suggests compatible alternatives.

Outlook Desktop itself can serve as a free testing tool by sending test emails to different versions installed locally or through Windows virtual machines. Microsoft offers Windows 10/11 for free evaluation for 90 days, allowing the installation of Outlook 2016/2019 for occasional testing without investing in paid tools.

Manual validation remains essential: open your test emails in at least 3 different Outlook versions (an older one like 2010 or 2013, a recent one like 2019, and Microsoft 365 web) before every major campaign. Pay special attention to VML background images, table spacing, custom fonts, and call-to-action buttons. 73% of Outlook display bugs are detected during the testing phase and fixed before sending when teams use dedicated preview tools.

The future of Outlook: Word engine termination in 2026

Microsoft officially ends support for Outlook desktop versions based on the Word rendering engine in October 2026, marking the end of a 19-year era of frustrations for email developers. The New Outlook for Windows, launched as a stable version in 2023, uses a modern web engine (EdgeHTML/Chromium) identical to that of Outlook.com, eliminating the majority of CSS and HTML compatibility problems.

This transition to a unified web rendering engine means that VML techniques, MSO conditional comments, and HTML table-based layouts will gradually become obsolete. However, the installed base of older Outlook versions will remain significant until 2028-2029 in conservative business environments that delay system updates. Maintaining legacy Outlook workarounds will be necessary until Word desktop versions represent less than 10% of your measured audience.

Developers can already anticipate this transition by adopting a progressive coding approach: a base structure in HTML tables for legacy Outlook, enhanced with flexbox and CSS Grid in media queries and <style> tags for modern clients. This “hybrid email” strategy ensures correct display on all current clients while preparing for the eventual abandonment of specific Outlook hacks.