Windows 10 Mail App with Outlook Conditional VML

user_1751825 0
Viewed 1958

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.

windows-10 vml outlook email
2 Answers

I know it's old question but it might be of use to people still struggling with web and windows outlook and windows mail.

I found a way to hide elements specifically from windows outlook and windows 10 mail app:

<span style="mso-element:field-begin;"></span>
 Content to hide from Outlook 
<span style="mso-element:field-end;"></span>

reference this great blog.

also you could target all outlook apps (mobile, web, desktop) as:

<!--[if mso]> 
    <div> Your content that you want visible </div>            
<![endif]-->

you could also invert it with other conditions and target specific versions, something like:

<!--[if !mso]> Everything not mso (outlook or windows mail) <![endif]-->
<!--[if gte mso 16]> All mso versions that are greater than 16 <![endif]-->

more on that on this link.

As for displaying backgound images in desktop/windows versions of outlook (mail app and outlook ms) you can use VML and more about that you can find here.

user_72137930
Related