Outlook is one of the most widely used email clients, but its various versions render emails differently. Earlier versions, such as Outlook 2000–2003, used Internet Explorer as the rendering engine. With the release of Outlook 2007, the rendering engine shifted to Microsoft Word, which lacks support for many standard HTML and CSS properties and comes with its own set of bugs.

Both Internet Explorer and Microsoft Word have distinct limitations, which may cause emails to display incorrectly or appear distorted.

Common Outlook Rendering Issues and Fixes

When designing your emails, keep the following common issues in mind:

Background Images and Button Styling in Outlook

• ⚠️Issue: Many versions of Outlook — particularly classic desktop versions that use Microsoft Word as the rendering engine — have limited support for CSS-based background images and modern button styles, such as rounded corners. To display these elements correctly, classic Outlook relies on VML (Vector Markup Language). Without it, background images may not render, and buttons can appear flat or broken.

  While recent web versions of Outlook, such as Outlook.com and Microsoft 365 webmail, support CSS backgrounds, classic desktop versions still require fallbacks.

• 📉Impact:
  • Background images may be missing.
  • Buttons may lose styling, appearing as plain rectangles.
  • Emails can look incomplete or visually inconsistent across Outlook versions.
• 🛠️Solution:
  • Use a solid background color as a fallback.
  • For full compatibility, use VML to render buttons and background images in classic Outlook desktop.
  • Alternatively, use a static button image linked to a URL, or insert background visuals as regular <img> blocks.

• Background Images Examples:

  • ❌ Standard CSS, works in modern clients but not classic Outlook desktop:

  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0" style="background-image:url('https://via.placeholder.com/600x200'); background-size:cover;">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        This is a background image (CSS method).
      </td>
    </tr>
  </table>

  • ✅ VML fallback, works in classic Outlook desktop:

  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;">
      <v:fill type="frame" src="https://via.placeholder.com/600x200" color="#cccccc"/>
      <v:textbox inset="0,0,0,0">
  <![endif]-->
  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        This is a background image (VML for Outlook).
      </td>
    </tr>
  </table>
  <!--[if gte mso 9]>
      </v:textbox>
    </v:rect>
  <![endif]-->

• Rounded Buttons Examples:

  • ❌ Standard CSS button, not supported in classic Outlook desktop:

  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center">
        <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif;">
          Rounded Button
        </a>
      </td>
    </tr>
  </table>

  • ✅ VML button for classic Outlook desktop:

  <!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1a73e8" fillcolor="#1a73e8">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
      Rounded Button
    </center>
  </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-- -->
  <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif; font-size:16px; font-weight:bold;">
    Rounded Button
  </a>
  <!--<![endif]-->

Image Blocking by Default

• ⚠️Issue: Outlook may block images unless the sender is trusted.
• 📉Impact: Emails may look empty or broken on first view.
• 🛠️Solution: Always add descriptive alt text and consider using background colors or HTML fallback content.

Outlook Image Resizing

• ⚠️Issue: Classic Outlook may render images at their original native size, ignoring CSS-defined widths. This is especially problematic when trying to scale down large, high-resolution images using only CSS - a common practice for supporting high-DPI displays.
• 📉Impact:
  • Images may appear too large in classic Outlook.
  • Layouts can break or become inconsistent across email clients.
• 🛠️Solution: To ensure consistent image sizing in Outlook, always use the width HTML attribute directly on the <img> tag. Outlook respects this attribute and will scale the height automatically to maintain proportions.

✅ Correct, resizes in classic Outlook:

<img src="image.jpg" width="300" style="width:300px;">

❌ Incorrect, classic Outlook may ignore this:

<img src="image.jpg" style="width:300px;">

Limited Animated GIF Support

• ⚠️Issue: Classic Outlook for Windows versions 2007–2016 only display the first frame of a GIF.

  GIF animation is supported in newer Outlook for Microsoft 365 versions, Outlook mobile apps, and Outlook.com. In Outlook for Microsoft 365, playback may also depend on the user’s Windows animation settings.
• 📉Impact: If key information appears in later frames, users won’t see it.
• 🛠️Solution: Ensure the first frame includes your CTA or most important message.

Inconsistent Font Rendering

• ⚠️Issue: In many desktop versions of Outlook, custom fonts are not supported. When you place a custom font first in your stack, Outlook may ignore the entire stack and default to Times New Roman, even if you've defined safe fallback fonts.
• 📉Impact: This results in inconsistent typography and can disrupt your email's branding, layout, and readability when viewed in Outlook.
• 🛠️Solutions:

  • ✅ Use attribute selectors to override custom fonts:
    Write your font stack as usual, but place your custom font last in the list. Then, add this CSS:

    [style*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !important; }

    This code ensures that email clients supporting attribute selectors, such as Gmail, Apple Mail, and most webmail services, will use your custom font if available. Classic Outlook ignores attribute selectors like [style*="..."], so it will use the fallback fonts you specified.

    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
        <style>
          div {font-family: Helvetica, sans-serif, 'Tangerine';}
    
          [style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; }
        </style>
      </head>
      <body>
        <div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Custom font example</div>
      </body>
    </html>

  • ✅ Apply conditional CSS just for Outlook using MSO comments:

    Alternatively, you can define your custom font stack in your CSS and use an MSO conditional statement to override it with standard system fonts specifically for Outlook.

    <style>
      div { font-family: 'CustomFont', Helvetica, sans-serif; }
    </style>
    
    <!--[if gte mso 9]>
      <style type="text/css">
        div { font-family: Helvetica, Arial, sans-serif !important; }
      </style>
    <![endif]-->

  • ✅ Or simply stick with standard system fonts such as Arial, Calibri, Times New Roman, or Verdana, which are fully supported across Outlook versions.

List Styling Issues in Outlook

• ⚠️Issue: Bullet points and numbers may not display as expected. Classic Outlook does not always preserve default list styling, particularly when lists are nested inside tables or divs.
• 📉Impact: Lists may appear as plain text with no bullets or numbers.
• 🛠️Solution: Use inline styles or fallback content. You can also manually add symbols, such as •, or use <td> cells for faux list styling.

❌ Problematic HTML, may not display properly in classic Outlook:

<table>
  <tr>
    <td>
      <ul>
        <li>First point</li>
        <li>Second point</li>
      </ul>
    </td>
  </tr>
</table>

✅ Improved HTML, Outlook-compatible faux list:

<table>
  <tr>
    <td style="font-family: Arial, sans-serif; font-size: 14px;">
      • First point<br>
      • Second point
    </td>
  </tr>
</table>

Ghost Columns: Fixing Column Alignment in Outlook

• ⚠️Issue: Classic Outlook desktop often mishandles exact column widths in side-by-side layouts. Even responsive emails built with two columns, such as two-column layouts adding up to 600px, may appear misaligned or stacked incorrectly.
• 📉Impact:
  • Columns may jitter, stack improperly, or display gaps.
  • Layouts that render fine in webmail or mobile may break in classic Outlook desktop.
• 🛠️Solution: Wrap your column tables inside an Outlook-only fixed-width “ghost” table using MSO conditional comments. Outlook sees this ghost table and renders the columns, while other email clients ignore it, preserving responsive behavior elsewhere.

🎯 Example HTML

<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="main_container">

      <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center"><tr>
          <td width="450">
      <![endif]-->

      <table width="450" align="left" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Left column content</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
          </td><td width="150">
      <![endif]-->

      <table width="150" align="right" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Right column content</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
        </td></tr></table>
      <![endif]-->

    </td>
  </tr>
</table>

Summary: Use ghost columns wrapped in MSO comments to enforce column widths in classic Outlook desktop without affecting the layout elsewhere. It’s a lightweight Outlook-specific fix that preserves a clean, responsive design everywhere else.

White Lines in Outlook Emails

• ⚠️Issue: Classic Outlook desktop may occasionally insert unexpected white horizontal lines between content blocks due to rounding errors in pixel-to-point conversions and inconsistent handling of table heights.
• 📉Impact:
  • Unwanted gaps appear in layouts.
  • Breaks visual flow and brand consistency.
  • Hard to predict - may appear randomly.
• 🛠️Solutions, try one or more:

1. Use even pixel values, preferably multiples of 4
   Set font-size, line-height, padding, and height to even numbers, preferably divisible by 4, to reduce rounding errors.

2. Insert Outlook-specific ghost breaks
   Prevent gaps with an MSO-only line break:

   <!--[if gte mso 12]><br /><![endif]-->

3. Use Microsoft-specific code
   This snippet can help reduce unwanted gaps by explicitly collapsing table borders and spacing in Outlook:

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

   Add this code to your email <head> section and test thoroughly. Depending on your layout, it may affect other elements, so always preview your email in Outlook before finalizing.

4. Add a non-breaking space as a buffer
   A common workaround is to add a non-breaking space ( ) just before closing the <td> tag:

   <table border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td>
         Your exclusive offer is waiting — click below to claim your discount!<br>&nbsp;
       </td>
     </tr>
   </table>

   This may add a small amount of extra space below your content, so be sure to preview and adjust your layout if needed.

5. Match background colors
   Hide lines by setting the body and problematic table rows to the same background:

   <!--[if gte mso 9]>
     <style>body { background-color: #123456 !important; }</style>
   <![endif]-->

🎯 Combined Example

<!--[if (gte mso 9)|(IE)]>
  <style>
    table { border-collapse: collapse !important; border-spacing: 0 !important; }
  </style>
<![endif]-->

<table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#fff;">
  <tr>
    <td style="font-size:16px; line-height:16px; padding:0;">
      Content above the line
      <!--[if gte mso 12]><br /><![endif]-->
      &nbsp;
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Content below the line</td></tr>
      </table>
    </td>
  </tr>
</table>

🛠 Quick Fix Cheat Sheet