The Complete Guide to Outlook Email Rendering in 2026

Outlook remains one of the most challenging email clients for developers. Unlike other clients that use web rendering engines, Outlook 2007-2019 uses Microsoft Word's rendering engine, causing countless CSS and HTML issues. This guide covers everything you need to know to make your emails look perfect in Outlook.

Why Outlook is Different

When Microsoft switched from Internet Explorer to Word for email rendering in Outlook 2007, they created years of frustration for email developers. Here's what you're dealing with:

• No CSS3 support - Flexbox, Grid, and modern CSS simply don't work
• Limited CSS2 support - Many properties are ignored or render incorrectly
• No background images in CSS - Requires VML (Vector Markup Language) workarounds
• Table-based layout required - Divs don't render reliably
• Odd pixel height bug - Elements with odd pixel heights add extra spacing

The 10 Most Common Outlook Bugs

1. The White Line Bug

Outlook adds mysterious white lines between table rows, especially with images. The fix:

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
  <tr>
    <td style="line-height: 0; font-size: 0;">
      <img src="image.jpg" style="display: block;" />
    </td>
  </tr>
</table>

Key fixes: border-collapse: collapse, line-height: 0, and display: block on images.

2. Background Images Don't Work

CSS background images are completely ignored. You need VML (Vector Markup Language):

<!--[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="tile" src="background.jpg" />
  <v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url('background.jpg');">
  Your content here
</div>

<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->

3. Margin and Padding Issues

Outlook ignores margin and padding on many elements. Use table cells for spacing:

<!-- Instead of margin -->
<table>
  <tr>
    <td style="padding: 20px;">
      Content with spacing
    </td>
  </tr>
</table>

4. DPI Scaling Problems

On high-DPI displays, Outlook scales content incorrectly. Add this to your head:

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

5. Link Styles Get Stripped

Outlook overwrites link colors. Force your colors inline:

<a href="#" style="color: #7C3AED !important; text-decoration: none !important;">
  <span style="color: #7C3AED;">Link Text</span>
</a>

6. Font Fallback Issues

Web fonts don't work in Outlook. Always provide fallbacks:

font-family: 'Your Web Font', Arial, Helvetica, sans-serif;

7. Image Resizing

Always set explicit width and height on images:

<img src="image.jpg" width="600" height="400" style="display: block; max-width: 100%;" />

8. Odd Pixel Heights

Elements with odd pixel heights (21px, 33px, etc.) can cause spacing issues. Use even numbers when possible.

9. GIF Animation

Animated GIFs only show the first frame in Outlook. Design your GIFs so the first frame conveys the message.

10. Div Width Ignored

Width on divs is often ignored. Use tables for layout:

<table width="600" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600">
      Content here
    </td>
  </tr>
</table>

MSO Conditional Comments

MSO (Microsoft Office) conditional comments let you target Outlook specifically:

<!--[if mso]>
  Outlook-only content
<![endif]-->

<!--[if !mso]><!-->
  Non-Outlook content
<!--<![endif]-->

<!--[if gte mso 9]>
  Outlook 2007 and newer
<![endif]-->

<!--[if mso 15]>
  Outlook 2013 only
<![endif]-->

Testing for Outlook

Before sending, always test your emails in Outlook. Mailglass Lite validates your HTML against 10 Outlook-specific rules and can auto-fix many common issues with one click.

Outlook Versions Quick Reference

Version	Rendering Engine	MSO Version
Outlook 2007	Word 2007	mso 12
Outlook 2010	Word 2010	mso 14
Outlook 2013	Word 2013	mso 15
Outlook 2016	Word 2016	mso 16
Outlook 2019	Word 2019	mso 16
Outlook 365	Word (latest)	mso 16
Outlook.com	Web-based	N/A

Key Takeaways

• Use tables for layout, not divs
• Add MSO conditionals for Outlook-specific fixes
• Use VML for background images
• Always set explicit dimensions on images
• Provide font fallbacks
• Test thoroughly with validation tools

Ready to test your emails for Outlook compatibility? Try Mailglass Lite - our free tool validates 10 Outlook-specific rules and offers one-click auto-fixes.