How to Fix Outlook Email Rendering Issues (2025 Guide)

If you've ever sent a perfectly designed email only to have it look completely broken in Outlook, you're not alone. Outlook uses Microsoft Word as its rendering engine, which means it ignores many modern CSS properties.

This guide covers the most common Outlook email rendering issues and how to fix them.

Why Outlook Breaks Your Emails

Outlook for Windows uses the Microsoft Word rendering engine instead of a browser engine. This means:

• No support for CSS floats or positioning
• Limited flexbox and grid support
• Background images require VML (Vector Markup Language)
• Max-width and padding behave unexpectedly

The 11 Most Common Outlook Issues (And Fixes)

1. Images Not Displaying

Problem: Images appear as broken placeholders or don't show at all.

Solution:

• Always include width and height attributes on <img> tags
• Use absolute URLs for image sources
• Add display: block to prevent unwanted spacing

<img 
  src="https://yoursite.com/image.jpg" 
  width="600" 
  height="300" 
  alt="Description" 
  style="display: block; border: 0;"
/>

2. Background Images Not Working

Problem: CSS background-image is completely ignored.

Solution: Use VML (Vector Markup Language) for Outlook:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="https://yoursite.com/bg.jpg" color="#ffffff"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="background-image: url('https://yoursite.com/bg.jpg');">
  Your content here
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

3. Layouts Breaking (Flexbox/Float Issues)

Problem: Multi-column layouts collapse or stack incorrectly.

Solution: Use tables for layout in Outlook:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" valign="top">Column 1</td>
    <td width="50%" valign="top">Column 2</td>
  </tr>
</table>

4. Extra Spacing and Gaps

Problem: Mysterious white lines or gaps appear between elements.

Solution:

• Add line-height: 0 to table cells containing only images
• Use mso-line-height-rule: exactly for precise control
• Set font-size: 0 on spacer elements

<td style="line-height: 0; font-size: 0; mso-line-height-rule: exactly;">
  <img src="image.jpg" style="display: block;" />
</td>

5. Rounded Corners Not Showing

Problem: border-radius is completely ignored.

Solution:

• Use images with pre-rounded corners for critical design elements
• Accept square corners in Outlook as a graceful degradation
• Use VML for Outlook-specific rounded buttons

6. Max-width Not Working

Problem: Emails stretch to full width in Outlook.

Solution: Use a fixed-width wrapper table:

<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width: 600px;">
  <!-- Your content -->
</table>

7. Padding Issues on Table Cells

Problem: Padding is inconsistent or ignored.

Solution: Use nested tables or spacer cells instead of padding:

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td width="20"></td> <!-- Left spacer -->
    <td>Your content</td>
    <td width="20"></td> <!-- Right spacer -->
  </tr>
</table>

8. Buttons Looking Wrong

Problem: CSS buttons break or look inconsistent.

Solution: Use bulletproof buttons with table-based approach:

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: #9E8FD3; border-radius: 4px; padding: 12px 24px;">
      <a href="https://link.com" style="color: #ffffff; text-decoration: none; font-weight: bold;">
        Click Here
      </a>
    </td>
  </tr>
</table>

9. Web Fonts Not Loading

Problem: Custom fonts default to Times New Roman.

Solution: Always include a fallback font stack:

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

10. Paragraph Spacing Issues

Problem: <p> tags have inconsistent margins.

Solution: Use inline styles to explicitly set margins:

<p style="margin: 0 0 16px 0; mso-line-height-rule: exactly; line-height: 1.5;">
  Your paragraph text
</p>

11. Links Turning Blue

Problem: Outlook adds its own blue color to links.

Solution: Apply color to both the <a> tag and a <span> inside:

<a href="https://link.com" style="color: #9E8FD3;">
  <span style="color: #9E8FD3;">Click here</span>
</a>

---

Testing Your Fixes

The only way to know if your fixes work is to test in actual Outlook clients. Different Outlook versions (2016, 2019, 365, Outlook.com) can behave differently.

EmailTestLab lets you preview your email across 6 email clients including multiple Outlook versions, helping you catch rendering issues before you send.

Test Your Email for Free →

---

Quick Reference: Outlook-Safe CSS

Property	Safe?	Alternative
background-image	❌	VML
border-radius	❌	Images or accept fallback
max-width	❌	Fixed table width
padding	⚠️	Works on cells, not divs
margin	⚠️	Use explicit values
display: flex	❌	Tables
float	❌	Tables

---

Conclusion

Outlook email rendering is challenging, but with the right techniques, you can create emails that look great everywhere. The key is:

1. Use tables for layout
2. Inline all CSS
3. Add Outlook-specific conditional code when needed
4. Test in real Outlook clients

---

Need to test your Outlook emails? Try EmailTestLab free - preview in 6 email clients instantly.