I have an template email, it actually working with Outlook from Office 2013, 2019 and 365 but i have an issue with Outlook Exchange 2016 : The <!--[if mso]> condition is not apply.
This the the code that is not apply :
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: 'Montserrat', sans-serif;
color: black !important;
}
</style>
<![endif]-->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
<v:fill type="tile" size="100%,100%" src="cid:{{ myBackground }}" color="#fff"/>
</v:background>
<![endif]-->
I don't understand why this doesn't work on this specific version of outlook :(
Does anyone has the answer ?
Related
Using the example from 'bulletproof backgrounds' doesnt work for me on outlook clients.
Is there any way to do this for outlook or is it just a straight up no?
Heres my code for reference. (some things i have tried)
<!--[if gte mso 9]>
<v:background fillcolor="red">
<v:fill type="gradient"/>
good day
</v:background>
<![endif]-->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
</v:background>
<![endif]-->
Your first example is missing the xmlns:v attribute, as well as the fill="t". Here’s a full working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VML Example</title>
</head>
<body>
<!--[if mso]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true" fillcolor="red">
<v:fill type="gradient"/>
</v:background>
<![endif]-->
<p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Culpa, saepe?</p>
</body>
</html>
Your second example works right out of the box for me (as, I presume, it comes from backgrounds.cm). Please note though that VML is only supported on the Outlooks on Windows. And <v:background> is not supported in dark mode.
I built an HTML block with a personalized code in the email and I would like to know why the text is displayed twice when opening the email in Outlook from a desktop device, only when using Windows OS.
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;v-text-anchor:middle;width:218px;" arcsize="5%" strokecolor="#ffffff" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#1672b9;font-family:'Noto Sans', sans-serif;font-size:12px; letter-spacing:1.5px; font-weight:bold;border-radius: 15px;">Personalized code</center>
</v:rect>
<![endif]-->
<a style="background-color:#ffffff;border-radius: 15px;color:#1672b9 !important;display:inline-block;font-family:'Noto Sans', sans-serif;font-size:12px;line-height:44px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;mso-hide:all; font-weight:bold; letter-spacing:3px;">Personalized code</a>
Use this:
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;v-text-anchor:middle;width:218px;" arcsize="5%" strokecolor="#ffffff" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#1672b9;font-family:'Noto Sans', sans-serif;font-size:12px; letter-spacing:1.5px; font-weight:bold;border-radius: 15px;">Personalized code</center>
</v:rect>
<![endif]-->
<![if !mso]>
<a style="background-color:#ffffff;border-radius: 15px;color:#1672b9 !important;display:inline-block;font-family:'Noto Sans', sans-serif;font-size:12px;line-height:44px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;mso-hide:all; font-weight:bold; letter-spacing:3px;">Personalized code</a>
<![endif]>
See also: "How do I make an “else” in an IE HTML conditional?".
when i send a same email to Gmail and outLook
its work perfectly on Gmail but in outLook its not showing background-image of div
Outlook supports background images and it's using VML. VML (vector markup language) is native to outlook. Below is the code you can use:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[WIDTH]px;height:[HEIGHT]px;">
<v:fill type="frame" src="[IMAGE PATH]" color="#[FALLBACK COLOR]" />
<v:textbox inset="0,0,0,0">
<![endif]-->
[HTML CONTENT HERE]
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->]]>
All you need to do is change the height and width of the VML, add in the image path and you are good to go. Be sure to place this inside a table with a specific width or you will have tiled images.
Cheers
I have the following condititonal to apply styling to outlook clients only
<!--[if mso]>
<style>
.myClass{
color: #000000 !important;
}
</style>
<![endif]-->
I've also tried:
<!--[if if gte mso 9]>
If I remove the condition the styling is applied. I've tried removing any other styling on the page and that doesn't resolve it.
I am testing it on Outlook 2013 as part of office 365 (screenshot of outlook info)
In your example, you have spelt the CSS property color as "coloir" - are you sure it is not due to this?
I'm coding up HTML emails and am trying to get a background banner image to render somewhat correctly across Outlook 2010, 11, 13, 16. Using this currently - http://backgrounds.cm/.
My issue is that Outlook 2010 and 2013 seem to zoom in on the background image.
My code:
<td background="https://someKitten.jpg" width="600" height="185" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:185px;">
<v:fill type="tile" src="https://someKitten.jpg" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
this seems to be a known issue but I'm not coming across any fixes. https://www.campaignmonitor.com/forums/topic/7953/bulletproof-background-images-enlarging-in-outlook/
and...fixed.
for anyone else struggling with this issue, set fill type to "frame"
<v:fill type="frame" src="https://someKitten.jpg" />