back arrow
All Blogs
Email Template Hacks for Outlook-and-Windows-10-Mail-hack

Email Rendering Issues in Outlook and Hacks to Save the Day

This article was originally published on May 15 2017 and has been updated to accommodate the workarounds for Windows 10 Mail...

With a plethora of email clients available for end user and each one rendering emails in different ways, coding and designing an email has been a turmoil for email marketers. After Gmail and Apple mail, Microsoft Outlook is the next big player in the email industry.

Outlook has been a great influence for both B2C and B2B email messaging with its journey from being the first free email service to building variations of desktop mail programs. There are different versions of Outlook available for desktop, webmail and mobile environments and it is bundled under the moniker of ‘Windows Mail 10’ with Windows 10. Statistically, Windows 10 is now installed in 29.8% of global systems which means email developers need to address the issues faced in ‘Windows 10 Mail’ along with other Outlook versions.

Emails not rendering in Outlook or any email client means a disappointed subscriber and the impact of this will blemish your brand identity in the longer run. Hence, most marketers avoid sending emails via Outlook. Emails not rendering in Outlook is the Email Uplers‘ team of experienced developers test every developed email on Outlook against the pitfalls described below.

Major Pitfalls for Emails in Outlook and Windows Mail 10

Here are the key issues for building a newsletter in Outlook amd Windows Mail 10 and the workaround for them.

Background images not supported

There different types of backgrounds you can use in your emails.

  • Full body background
  • Pattern Background
  • Graphic Background
  • Section-wide background

Unfortunately Outlook 2007-2013 do not support any of the above backgrounds, but the ideal solution for rendering is by using VML (Vector Markup Language).

Input the below code in the <body> tag of your HTML for the background image to cover the entire email window.

<div style="background-color:#000000;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="IMAGE.png" color="#000000"/>
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<td valign="top" align="left" background="IMAGE.png">

While this code worked wonders in displaying the background image to emails opened in Outlook 2007, 2010 and 2013. But Windows Mail 10 still faced issues and needed the code to be modified to add v:image with its source allowing the background image over the container using v:rect. Moreover, by adding properties such as opacity as 0% in v:fill enables the top layer to be transparent to allow new div with content in it and placing inline-block;position: absolute in v:rect the container position is fixed as a background.

<td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e" style="height:700px; background-image:url(Image Live URL Here);background-color: #f7901e;">
  <!--[if gte mso 9]>
  <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 550px; height: 700px;" src="Image Live URL Here" />
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 550px; height: 700px;">
    <v:fill  opacity="0%" color="#f7901e"  />
    <v:textbox inset="0,0,0,0">
		<!-- HTML Content Here -->
      <!--[if gte mso 9]> 

And in order to include a background pattern in an email you can upload the pattern onto ‘‘ and get the readymade VML code. You can find more information regarding how to add background in Outlook email template in our blog titled “Background Images in Emails“.

Animated GIFs do not work

Newer versions of outlook (2003+) do not support animated GIF and instead display just the first frame of the animation.

Outlook freezes an animated GIF on its first frame and hence try creating a GIF that conveys the message in its first frame itself, which runs for just a few milli-seconds. You can have supporting slides having GIF frames for other email clients.


Additionally you have a static image with the message which will replace the GIF when opened in Outlook using Outlook conditional coding.

During the initial release, Windows Mail 10 followed the tradition of only showing the first frame of an animated GIF. With later updates, the issue was patched up and currently Windows Mail 10 supports animated GIF.

Border-radius property

Border-radius property is one of the most commonly used CSS property but unfortunately it is supported in neither of the Outlook variants or in Windows 10 mail. Currently there is not workaround for the same and your subscribers shall have to do with square buttons.


Original Email CTA



An example where the rounded CTA button becomes a weird looking rectangle button

No support for position and float

Modern web and email development lets you use containers such as divs to structure content. Attributes such as position and float are used with the divs within an HTML code. Outlook or Windows 10 Mail don’t support these attributes.

To structure your emails that render across all major clients/browsers/devices, use tables to build emails. Think in terms of rows and columns to easily build emails with tables and stick with align=”left” property.

Links getting converted to purple or blue

When the emails are sent using HTML template from Outlook, all the links in the email turn to either blue or purple, with an underline. Regardless of what colored text is used, the blue/purple underline persists when viewed on different email clients.

To avoid this issue, use the <font> tag and wrap the text with a <span> tag and a style attribute. Use the following code:

<a style="color:#E3A216; text-decoration:none;">
<span style="color:#E3A216;">
<font color="#E3A216">
Click me

Outlook specific Workarounds

Additional padding below images

You may find additional space under the images in A few pixels of additional padding is added below the images. To remove this floating space, add the below style:



This removes the extra padding and gives predictable results for other email clients, too. However, the padding support does not work at span or anchor tag and works for table/td tag. This normally does not happen in Desktop version of Outlooks only in web version i.e.

DPI Scaling

There are chances that an email which renders well on your system may not work on your clients’ devices. Outlook has an issue with the DPI scaling, wherein any resolution of 1920×1080 and above will distort the layout of your email. This problem usually persists on Windows 10 where default setting is with 125% resolution rather than 100%.

DPI Scaling makes the following changes:

  • Widths and heights specified in HTML attributes remain pixel values.
  • Widths and heights specified in VML code remain pixel values.
  • Other pixel values (px) are converted to point (pt) values instead.

So a text of 10pt @ 150% desktop scaling would be equivalent in size to same text in 15pt @ 100% desktop scaling.

The workaround for this issue is to enable the VML code added in the <head> to scale as per the resolution and additionally have a table with absolute width (containing the email code) nested inside a table with relative width. You may refer to the complete solution in our blog titled “DPI Scaling in Outlook 2007-2013 – Achieving it like a pro!“.

Moreover it is a good practice to  test your emails in higher DPI before sending.

Email Uplers Recommends

Ideally, your email templates need to be coded for 120DPI even if your subscribers do not use Outlook widely

Additional page break

Outlook 2007-present use MS Word to render HTML emails and the email appears as it would in print preview- sometimes a white space is inserted above an image or sometimes the text in adjoining tables gets misaligned. This causes the display to look different from how it was actually designed and tested.

To eliminate the white space, reorganize the content, eliminate the nested tables that contain extra length. Remove unnecessarily used nested tables to reduce the length below 22 inches.

Rendering CSS issues

Outlook CSS not working is one of the most important rendering issues. Since Outlook 2007 and above do not support CSS floats, CSS positioning, Flash or other plugins, you need to use XHTML instead of HTML. Moreover, the CSS needs to be inlined as far as possible so that it is not stripped away.

No email template is perfect and can be improved for conversions. Exhausted all the options for improving a specific email template?

Let Email Uplers audit your email templates and suggest new ways to improve ROI.

Fallback font Rendering

Emails not rendering in Outlook is common in case the primary font is not available on the subscriber’s device. Outlook tends to render the entire email copy in Times New Roman, ignoring the specified fallback font. In such cases, you need to force Outlook to render the fallback font that is specified using a conditional code.

<!--[if mso]>

    h1 {
      font-family: Primary font, Fallback font;


Flawless rendering in Outlook is not a cake walk. If you are facing any kind of hurdles in email template production, my expert team can help you with your requirements.

Contact us now>>>

    Get In Touch

    We shall get back to you within a few hours.

    The following two tabs change content below.
    Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing email design and coding companies. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage, share insights with fellow marketers, and enjoys sharing his thoughts on the latest email marketing best practices.

    Latest posts by Kevin George (see all)

    6 thoughts on “Email Rendering Issues in Outlook and Hacks to Save the Day”

    • carlos

      What is 22 inches in pixels? Because an online covertes says: 22 inch = 2112 pixel .. but is too much

      • Hey Carlos.
        It will be 1,790 pixels.
        If you’ve any other query, please feel free to reach out to us at hello(@)Uplers(.)com.

    • Lucas Garlepp

      Hey guys, I have an email template that has a button in it so users can click on the button to accept an invitation. It’s just a link to a web URL and passes the ‘accept’ result back with some details. On my O365 web client the button renders as it should but the same email in my Outlook 2016 desktop client (same subscription) shows the button as a text link, not an image. I use defaults for HTML email, so can’t see why it’s doing this – any ideas?

    • Lucas Garlepp

      Hey guys I have a email template that has a button in it to allow users to click to accept an invitation. it passes that back to a URL with some user details. In my O365 web client the button shows correctly as a button but in my Outlook 2016 client (same subscription) the button shows as a text link. using standard outlook HTML email so not sure why it’s doing that – any ideas?

      • Hey Lucas,

        Can we get the HTML code to check this issue at our end?

        Without looking at the HTML code, it would be difficult to resolve the issue or share any feedback.

        Looking forward to receiving the HTML code.

        You can also get in touch with We would love to help you out.

    • Caleb Runion

      border-radius property is now supported in outlook!

    Leave a Reply



    Email Template

    Transform your requirement into visually-appealing & high-converting email templates.


    Focus on your business strategy; let us handle the day-to-day operation of your email campaigns.


    Eliminate the woes of hiring and training for resources with our dedicated team of scalable email experts.


    Get more from your paid marketing campaigns through conversion-driven landing pages and banners.