Outlook VML background Images - Client denied use. New issue?

I bet money Stig will answer this :) So, I have used Stig's code generator to apply background images and buttons to my emails. It works great and passes all email client tests in Litmus. Just today I had a client reply with the below. Is this true? Any input or facts you have would be great! If this is a new issue to you, sorry to bring the news.


"Upon our QA of the final email code – we are seeing that a script was used to include the bspot images in the creative. This script will not render in a browser and background images will not show in certain ISPs. This script will need to be removed and image tags will need to be inserted in their place."

Any help is greatly appreciated with this issue. Thanks a lot in advance!

dedra dedra, 3 years ago

Hi j.sedlock99,

what script you inserted into copied true html and vml code? You maybe use browser like Internet Explorer and you have enabled some accelerators, like translator, search engines etc. These accelerators insert some add-on code with script calls you maybe copied with this html and vml code and paste all into your template source. From Stig's generators, please copy only source code you see in frames right. Nothing more. That vml code is limited only to Microsoft Office (Outlook) 2000 and newer.

Please check your template source for script calls and remember, that vml code cannot be nested.

Otherwise Stig's code works as suggested, namely normal.

j.sedlock99, 3 years ago

The script inserted was just copied and pasted into my html file. I am a Firefox guy, not to keen on IE yet, although, I did check it in IE and it was fine. Here is one example from my HTML file.

<table align="center" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                <td align="center" background="images/case.jpg" bgcolor="#ffffff" height="78" width="192" valign="bottom">
                                    <!--[if gte mso 9]>
                                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:192px;height:78px;">
                                    <v:fill type="tile" src="images/case.jpg" color="#fffcfc" />
                                    <v:textbox inset="0,0,0,0">
                                    <![endif]-->
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="192">
                                        <tr>
                                        <td align="center" height="78" valign="bottom">
                                            <table align="center" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                            <td style="color: #0069ff; font-family: 'Helvetica Neue', Helvetica, Arial; font-size: 11px; font-weight: bold; line-height: 14px;">
                                                <span style="color: #0069ff;">tell me more</span>
                                            </td>
                                            </tr>
                                            </table>
                                        </td>
                                        </tr>
                                        </table>
                                    <!--[if gte mso 9]>
                                    </v:textbox>
                                    </v:rect>
                                    <![endif]-->
                                </td>
                                </tr>
                                </table>
dedra dedra, 3 years ago

j.sedlock99, it look as clean piece of html and vml code. I don't know, but script you search is placed elsewhere in your template or maybe you insert script with some image into editable content of your campaign. Do you have link to your template?

You mentioned about bspot images. You mean BlogSpot images? Maybe these images you get with script, you insert into code as url to your background image, but you must use url to image directly, I think.

j.sedlock99, 3 years ago

I have the file link and zip file links. Will that work?

http://htmltest.denalimarketing.com/CM-help/T13057_CrossSell_EM.html
http://htmltest.denalimarketing.com/CM-help/CrossSell-email.zip

j.sedlock99, 3 years ago

oh, I should mention, the original version i sent them I modified the button code to acheive round corners on an element. Do you think that could be the culprit?

dedra dedra, 3 years ago

Thank you for links. When i look to your html code, it looks good.

But on line 189 you have two quotes at end of style:

<span style="color: #999999;"">endless options.</span>
                            ^^

Maybe code check on upload template service do not understand it and they think, that you continue with your style attribute. And then error message do not know, how evaluate it, then tell you something about script. Or maybe this error generates next block I found.

At line 435 you have <!--[if mso]>, but i do not know if any e-mail client understand it. When I tested my templates, I tested this decision too, but do not work for me in any client. If you can, do not use it. Edit your code for any client and browser style and then only add your <!--[if gte mso 9]> blocks for Outlooks.

Enjoy

dedra dedra, 3 years ago
j.sedlock99 :

oh, I should mention, the original version i sent them I modified the button code to acheive round corners on an element. Do you think that could be the culprit?

Maybe, I don't know, but as I wrote, syntax <![if mso]> / <![if !mso]> does not work for me on any client I use - Windows XP/7 & Outlook 2003/2007/2010, Windows XP/7 & Thunderbird, Windows XP/7 & MS Live, Mac OSX & Mail, Mac OSX & MS Outlook 2011, Some webmail portals like Seznam.cz (our national free mail), GMail, Hotmail (now Outlook.com) in any main browsers etc.

Edit: Some browsers (like Firefox) correct small mistakes in code, but better is, that code is correct.

dedra dedra, 3 years ago

In my (our) template, I tried rounded corner buttons too, but after some tests, i returned to classic solution for buttons: tables, links and images. If you use images with rounded corners and corners transparency, then it looks good and work in most clients. Nothing special.

Look into my test campaign (template) here: https://dedra.createsend.com/t/ViewEmai … 38AC4859C/. Sure, it's mainly for big clients, not for mobile, but worked for me (us).

j.sedlock99, 3 years ago

Debra, thanks for all you input! My guess is that it is something on our clients end because they end up running the code through a tool that applies edits to the HTML. As far as the edits go, I don't know exactly what the tool does. My crew and I are confronting them about using background images for the sake of better looking emails but they will be a hard one to nudge since they don't jump for joy when change must occur. Even if it is for the better. I am also going to try to figure out what tool they are using and what it exactly does. Thank you for your time and effort!

j.sedlock99, 3 years ago

*Dedra

Sorry!!!!!

dedra dedra, 3 years ago

j.sedlock99, here is the same situation. Better look, but most ideas crashed on technical limits of mail clients. Managers does not understand it. His last idea was to use full image with grass as background, but as you see (if you look on our test campaign) in footer is as separator used background image (like comb) and vml code cannot be nested. I say again and again, that simplicity is power. Good luck.

Stig Stig, 3 years ago

Hey guys,

I'm a little late to the party, so it's great to see you're already figuring things out here :)

Unfortunately it's not easy to comment on the client's feedback without some specifics on what the issue is. For instance, are there specific ISPs or email clients where the VML causes problem but a plain HTML/CSS background image works?

About the conditional comments, I think you may already be aware, but emailbtn.net uses two different types of conditional comments:

Downlevel-hidden conditional comment

<!--[if mso]> Only render in Outlook <![endif]-->

Downlevel-revealed conditional comment

<![if !mso]> Don't render in Outlook <![endif]>

So something like <![if mso]> would probably not work as intended. If you're having trouble with either of the syntaxes above though, definitely post a code sample of that here, and a screenshot of the problem.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
dedra dedra, 3 years ago

Hi Stig,

little late, but you are Stig and you have permitted it.

I understand, but you test these "MSO" conditional comments in any version of Outlook? I do from version 2000 to the 2013 include Mac OSX's 2011 version. In newer versions it work, but in older does not. I think, that in "<!--[if mso]>" must be used with -- as it like html comment. Then conditional comments <!--[if gte mso 9]> works in any version of Outlook. On web, sure, work "[if IE]" and "[if !IE]".

Original problem was: "Upon our QA of the final email code – we are seeing that a script was used to include the bspot images in the creative. This script will not render in a browser and background images will not show in certain ISPs. This script will need to be removed and image tags will need to be inserted in their place."

... when he use your buttons solution.

Redferret, 3 years ago

I wrote a long response to this yesterday but my session timed out :(, heres the gist.

Your client seems a little naive to the more advanced techniques like VML, I expect their internal developers are a little scared of VML because it's a bit of a hack.

I'm not sure what's meant by ISP here, I guess they mean, Gmail, Yahoo etc... to which I would say provided your tests passed spam scores and arrived as expected there not much to worry about. You'll also want to make sure that your sending server doesn't strip out comments prior to send.


Gmail app apologist
Redferret, 3 years ago
dedra :

Hi Stig,

little late, but you are Stig and you have permitted it.

I understand, but you test these "MSO" conditional comments in any version of Outlook? I do from version 2000 to the 2013 include Mac OSX's 2011 version. In newer versions it work, but in older does not. I think, that in "<!--[if mso]>" must be used with -- as it like html comment. Then conditional comments <!--[if gte mso 9]> works in any version of Outlook. On web, sure, work "[if IE]" and "[if !IE]".

Original problem was: "Upon our QA of the final email code – we are seeing that a script was used to include the bspot images in the creative. This script will not render in a browser and background images will not show in certain ISPs. This script will need to be removed and image tags will need to be inserted in their place."

... when he use your buttons solution.

the code targets the mso 9 rendering engine which is used by Outlook 2007+. Outlook 2003 uses Internet Explorer so it uses the fall-back code.

Outlook 2011 (Mac) uses webkit or gecko rendering so that will also use the fallback.

I hope that makes sense, I think we're getting our wires crossed a bit.


Gmail app apologist
dedra dedra, 3 years ago

Redferret,

sure, it's a hacks, but combine html and vml code is relativelly normal. Sure, if you can create and insert vml code into html code, you must at least understand what you're doing and understand vml syntax code.

But from first we discuss about some script, that in html e-mail nothing to do and e-mail clients do not accept it. Sure, in template, we discuss, is not any script and maybe problem is that combination of html and vml code and/or conditional comments.

dedra dedra, 3 years ago

Redferret,

makes sense and I know about it. But all these apps is from Microsoft, then primary source I read is MS technet, forums and tests I make for create newsletter template as wanted by our marketing managers - any versions of Outlook, any versions of OS-es (virtual), any main browsers, any webmails in our country.

Outlook 2007+ uses Word as rendering engine and Internet Explorer for printing, I think, Right, 2003 uses Internet Explorer, but Outlook 2011 Mac uses WebKit, not Gecko.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098