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?".
Related
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 ?
I have created a button in HTML for outlook with CSS styling:
<!--Join Meeting Button-->
<tr>
<td colspan="2" align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${meetingUrl}" style="height:50px;v-text-anchor:middle;width:250px;" arcsize="50%" stroke="f" fillcolor="#ad122a">
<w:anchorlock/>
<center>
<![endif]-->
Join Meeting
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</td>
</tr>
And it looks fine in the draft email, but when I send the email, the Join Meeting Button is displayed as an image, as if converted, and the link does not work. The link works fine in the draft email using CTRL + Click.
Is there a way to prevent this?
Outlook desktop apps convert buttons into image.
please your following code for perfect style of button on every email client.
<!--[if mso]><a href="${meetingUrl}" target="_blank">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" stripoVmlButton href="${meetingUrl}"
style="height:41px;v-text-anchor:middle;width:131px;" arcsize="61%" stroke="f" fillcolor="#ad122a">
<w:anchorlock></w:anchorlock>
<center style='color:#ffffff;font-family:arial, "helvetica neue", helvetica, sans-serif;font-size:14px;font-weight:700;'>Join Meeting</center>
</v:roundrect></a>
<![endif]-->
<!--[if !mso]><!-- --><span class="msohide es-button-border" style="border-radius: 0px; border-width: 0px; background:#ad122a; border-color: #ad122a;"><a class="es-button" href="${meetingUrl}" style="font-size: 17px; font-weight: bold; border-radius: 25px;" target="_blank">Join Meeting</a></span>
<!--<![endif]-->
Or you can use this site to create buttons https://buttons.cm/
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'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" />
I used to help design the emails at my old company but the digital marketer I used to use a website called 'backgrounds' to make one cell have a background that we could put text over.
What would happen is, i would slice the cell up in photoshop/illustrator that needed to have the text on the background and he would upload it to this website and it would give him the html for the link and then he would paste it into the email. I have an example of the code below but have no under idea what the website is that he previously used
<!--Cell 4--><td background="cell_04.jpg" style="display:block; font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px" bgcolor="#000000" width="214" height="181" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:214px;height:181px;">
<v:fill type="tile" src="cell_04.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<div style="font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px">
<![endif]-->
<div class="auto-style1" style="font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px">
<br>
Give someone you love the perfect Valentine’s Day gift with a beautiful and contemporary Spaceform piece engraved with your own words.
<br>
<br>
The stunning quality of our pieces means they can be treasured forever and will always be a special reminder of how much you love someone.<br>
<br>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
Does anyone know of the website he used or how this could be done better, remember we were not coders at the time of creating this code.
use background inside the style
background=url("path to image");
<td style="background=url("cell_04.jpg");display:block; font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px" bgcolor="#000000" width="214" height="181" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:214px;height:181px;">
<v:fill type="tile" src="cell_04.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<div style="font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px">
<![endif]-->
<div class="auto-style1" style="font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px">
<br>
Give someone you love the perfect Valentine’s Day gift with a beautiful and contemporary Spaceform piece engraved with your own words.
<br>
<br>
The stunning quality of our pieces means they can be treasured forever and will always be a special reminder of how much you love someone.<br>
<br>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>