emailoutlookwindows-10vml

Windows 10 Mail App with Outlook Conditional VML


This one is a bit obscure, but I'm hoping someone may have a solution.

I'm creating an email template, with a full width header bar. After a great deal of hacking around, I've been able to get this working nicely in most email clients, using a combination of background-image styles, and conditional VML (for Outlook clients).

The problem is that the Windows 10 Mail App responds to the Outlook conditional statements, but is unable to render the VML correctly. This results in an ugly broken image icon with the message "This picture can't be displayed".

This is my conditional VML block...

<!--[if gte mso 9]>
    <v:rect stroke="f" fill="t" style="mso-width-percent: 980; height: 200; position: absolute; z-index:-1; mso-position-horizontal: left">
<v:fill type="tile" src="/Content/images/my_background.gif" color="#f4f4f4" />
    </v:rect>
<![endif]-->

So what I need, is to either get Windows 10 Mail to display the VML correctly, or ignore the section altogether. The design works passably without the header bar, but I just don't want it to show the broken image icon.


Solution

  • Partial Solution A

    Modify your condition to

    <!--[if (gte mso 9)&(lte mso 15)]>
    

    and the VML block to show in Outlook 2013 but not in Windows 10 Mail App. However, it will as well not be shown Outlook 2016. They both think they are mso=16. (Last 2 sentences unverified yet.)

    Partial Solution B

    https://litmus.com/community/discussions/4176-windows-10-mail-bulletproof-background-buttons-broken