MailHog
← All posts

Outlook Breaks Your Emails: 7 CSS Features You Cannot Use

A
Admin
·

You built a beautiful welcome email. It looks perfect in Gmail, Apple Mail, and Yahoo. Then someone opens it in Outlook 2016 and the layout is destroyed — columns overlap, images disappear, buttons break.

Here's the thing most frontend developers don't know: Outlook desktop (2007 through 2019) doesn't render HTML with a browser engine. It uses Microsoft Word's HTML renderer. Once you understand that, everything else makes sense.

The Word Rendering Engine

Microsoft switched Outlook's rendering engine from Internet Explorer to Word in Outlook 2007. Fifteen years later, nothing has changed. Outlook 2019 and the Microsoft 365 desktop client still use Word to render HTML email. The web version of Outlook uses a browser engine and handles modern CSS reasonably well — but you can't control which version your recipients use.

The 7 Features Outlook Destroys

1. Flexbox and CSS Grid

Word doesn't understand display: flex or display: grid. Your columns collapse into a single vertical stack — or worse, overlap.

The fix: Use HTML tables for layout. Yes, tables. In 2026, email layout still runs on <table>, <tr>, <td>.

<!-- Instead of flexbox -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" valign="top">Left column</td>
    <td width="50%" valign="top">Right column</td>
  </tr>
</table>

2. background-image on Most Elements

Word ignores background-image on <div>, <td>, and most elements. You get a blank background where your hero image should be.

The fix: Use VML (Vector Markup Language) conditional comments for Outlook:

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
  style="width:600px;height:300px;">
  <v:fill type="frame" src="https://example.com/hero.jpg" />
  <v:textbox inset="0,0,0,0">
<![endif]-->
  <div style="background-image:url('hero.jpg');width:600px;height:300px;">
    Content here
  </div>
<!--[if mso]></v:textbox></v:rect><![endif]-->

3. SVG Images

Word has no SVG support. Your SVG icons and logos render as empty boxes or don't appear at all.

The fix: Export SVGs as PNG at 2x resolution for retina displays. Use the PNG in the email.

4. position: absolute and position: fixed

Word's rendering model doesn't support CSS positioning. Elements with position: absolute are rendered in-flow, often overlapping other content unpredictably.

The fix: Don't use positioning in email. Structure your layout entirely with tables and inline styles.

5. Padding on Divs

Word handles padding on <div> elements inconsistently — sometimes it works, sometimes it adds extra space, sometimes it's ignored entirely.

The fix: Use cellpadding on table cells, or use empty spacer cells:

<td style="padding: 20px 24px;">
  Your content with reliable padding
</td>

6. Web Fonts

Word ignores @font-face declarations entirely. Your custom typeface falls back to Times New Roman if you don't specify a system font stack.

The fix: Always include a system font fallback:

font-family: 'Your Custom Font', -apple-system, BlinkMacSystemFont,
  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

7. CSS Animations and :hover

Word doesn't execute CSS animations, transitions, or pseudo-selectors like :hover. Your animated CTA button renders as a static block.

The fix: Design for static first. Animations are progressive enhancement — if they work in Gmail, great, but your email must be fully functional without them.

Detecting Issues Before You Send

Manually checking Outlook rendering for every email is slow and error-prone. Use an automated HTML compatibility checker that flags Outlook-specific issues before you deploy. MailHog's compatibility tab scans your email HTML and reports exactly which elements will break in which clients.

For a hands-on walkthrough, see our guide on previewing email HTML across clients.

Pre-Flight Checklist for HTML Email

  1. Layout uses <table> elements, not flexbox or grid
  2. All styles are inline (no <style> block reliance for critical layout)
  3. Images use absolute URLs and have width/height attributes
  4. Background images have VML fallback for Outlook
  5. Font stack includes system fonts as fallback
  6. No SVGs — use PNG equivalents
  7. CTA buttons use the "bulletproof button" pattern
  8. Tested via compatibility check before deploy

FAQ

Does Outlook on the web have the same rendering issues?

No. Outlook.com (the web version) uses a browser-based rendering engine and supports most modern CSS. The Word-based rendering engine only affects the desktop Outlook application (2007–2019 and Microsoft 365 desktop). However, Outlook.com has its own quirk: it aggressively strips certain CSS properties for security reasons.

Why hasn't Microsoft fixed Outlook's rendering engine?

Microsoft uses Word's engine because it gives Outlook rich text editing capabilities — composing email with the same engine that renders it. Microsoft has acknowledged the developer frustration but has not indicated plans to switch to a web-based renderer for the desktop client.

Is it worth supporting Outlook at all?

For B2B email, absolutely. Microsoft 365 has over 400 million paid seats. If you're sending transactional email to business users, a significant portion will read it in Outlook desktop. For consumer-focused apps, the percentage is lower but still non-trivial.

← Back to all posts