Does outlook 2013 or infact any version of desktop client have problem with css rendering? there is this problem with table td background image in edm. my edm works perfectly fine if I sent it through web browsers but if I use outlook client the td background have slight css changes and I inspect the codes it add additional <span> and <p> before my td background.
This is the image of working edm
and this is the code
<td background="http://****Whatsnew.png" bgcolor="#E7E7E9" width="250" height="36" valign="top" style="background-repeat: no-repeat; display:block;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:260px;height:36px;">
<v:fill type="tile" src="http://*****Whatsnew.png" color="#E7E7E9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table style="color: white; font-size: 15px; display:block; Margin-left:12px;" cellpadding="0" cellspacing="0" border-collapse="collapse">
<tr>
<td width="0" height="4" style="line-height:1px;font-size:1px;">
<font style="font-size:1px;display:none !important;display:none;"> </font>
</td>
</tr>
<tr>
<td></td>
<!-- 1ST COLUMN RIBBON TEXT -->
<td>What's New</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
and sent out through outlook client problem with css
code inspect, addition css is added the p and span class
Yes, there are some issues with HTML and CSS in Outlook, which uses Word to render HTML content. See: "Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007"
Related
I'm making email template and need to place text in center of the image. I've tried this solution (Table align RIGHT within VML textbox???), but my image can't be displayed.
Here is my code:
<div align="center" style="margin: 0; padding: 0;">
<table border="0" cellspacing="0" cellpadding="0" width="80%" style="width:45em;padding:0;margin:0;border-spacing:0;">
<tbody>
<tr>
<td valign="bottom" height="300" background="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg" style="background-size: 100% 100%;height:15em;text-align: center;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 700px; height: 250px;" src="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 700px; height: 230px;">
<v:fill opacity="0%" color="#111111" />
<v:textbox inset="250px,180px,0px,0px" style="mso-text-scale: 26px; mso-fit-text-to-shape: false; ">
<![endif]-->
<div align="right">
<h1 style="color: #fff; text-transform: uppercase; font-size: 2em;margin-bottom: 1em;">|||Some text in caption here|||</h1>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
</tbody>
</table>
It displays good for some certain Outlook window size, but how can i fix the text horizontaly in the center???
If we talk about horizontal center then you need to put table with centered cell inside <v:textbox> tag. Like this:
<!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill type="tile" src="/path/to/image" color="#343434" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" align="center" style="text-align: center;">Centered text</td>
</tr>
</table>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->
The background property is not supported in Outlook as it is hown in the markup (only when there is a URL):
<td valign="bottom" height="300" background="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg" style="background-size: 100% 100%;height:15em;text-align: center;">
You can specify a background color, but not an image URL.
The fact is that Outlook uses Word for rendering message bodies. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
My email build is using the well-known bulletproof background images that campaign monitor have kindly created. This ensures that these images render on various versions of outlook.
Although I'm using the correct HTML & VML code supplied, once testing my email it still does not render the background images on outlook.
I'm currently at my wit's end with this, the code looks perfect.
If there's something that doesn't look right please let me know.
<td background="https://image.ibb.co/dp5R4p/herobg.png" bgcolor="#7bceeb" width="640" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="https://image.ibb.co/dp5R4p/herobg.png" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
<img src="https://image.ibb.co/dvzyue/herocta.png" alt="hero offer" width="600" class="width-100" style="width:600px;" border="0">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
You've removed the height from the original code. I'm guessing that was for responsiveness, but the VML will only show up on Outlook Desktop, so it doesn't need to be responsive. Outlook needs the height to hold the shape open.
I created an eDM for client that only want it to be sent out from outlook desktop client. I have some issue with the css or rather I do not know what is the error. When I open up the eDM in web browser everything was ok and even insert the code in outlook client but when i receive the eDM itself the css layout have a slight change.
The Following image is what i have archive and open with web browser
This image shows the result after i sent and receive
As you can see the different is the line spacing there
How do i solve this error ? here is my code for that part. I am using Outlook 2013 Thanks
<table class="content" style="text-align: left; border-collapse:collapse;" width="240" cellpadding="0" cellspacing="0">
<tr class="grad" style="display:block;">
<td background="http://i1042.photobucket.com/albums/b423/Zayle_Ong/Whats%20new_zpsocpwuf08.png" height="36" valign="top" style="background-repeat: no-repeat; overflow:hidden;width:242px;display:block;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:240px;height:36px;background-color:white;background-repeat: no-repeat;">
<v:fill type="frame" src="http://i1042.photobucket.com/albums/b423/Zayle_Ong/Whats%20new_zpsocpwuf08.png" color="#E7E7E9" border="0" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table style="color: white; font-size: 15px; display:block; Margin-left:12px;" cellpadding="0" cellspacing="0">
<tr>
<td width="0" height="4" style="line-height:1px;font-size:1px;">
<font style="font-size:1px;display:none !important;display:none;"> </font>
</td>
</tr>
<tr>
<td>What's New</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
Sadly the ans to this is Outlook client mail do not support background images, and it only support most basic html Css codes. by saying that use Inline styling.
Solution to have editable text over the image is to set plain background colors.
I am trying to add a text on top of an image as below. It is working on all email clients except Outlook 2010, Outlook 2007, Outlook 2013. Padding is ignored for all three. I have looked everywhere tried everything :( Please help me in getting the text on top of the image such that it has 147px left and 107px top padding/margin/?
Solved it finally as below:
<tr>
<td background="yourimage.gif" bgcolor="#c0393f" width="600" height="240" valign="top" style="background:url('yourimage.gif')">
<!-- M$ hack for table background images -->
<xsl:comment>
<![CDATA[[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" color="#c0393f" style="width:600px;height:240px;">
<v:fill type="frame" src="yourimage.gif" />
<v:textbox inset="107px,147px,0px,0px" id="headerTitle">
<![endif]]]>
</xsl:comment>
<font style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;">
<div style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;padding:147px 0px 0px 107px;">
Your Text
</div>
</font>
<xsl:comment>
<![CDATA[[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]]]>
</xsl:comment>
</td>
</tr>
div padding is ignored in outlook. Your best bet is to insert a table inside the div and then pad the TDs inside of it.
There were some other errors in your code, that i made changes to in the below, but this works in Outlook. I would also recommend using padding-top, etc instead of just padding because i have found it is more widely accepted and consistent across email clients.
<table width="640" height="240">
<tr>
<td background="http://www.swagatobhatta.info/emailtest/header.gif" width="600" height="240" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
<v:fill type="tile" src="http://www.swagatobhatta.info/emailtest/header.gif" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="400" align="right" cellpadding="0" cellspacing="0" border="0" style="color:#c9be8a;font-weight:700;font-size:19px;width:400px;">
<tr>
<td style="text-transform:uppercase;padding-top:107px; padding-left:147px;">TEST CONTENTS TEST CONTENTS TEST CONTENTS</td></tr>
</table></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
I am trying to add a background image to a table element tr for email html template. There is also a text that is displayed at the top of the image.
The text is dynamic coming from a from field so I can not make it as
image in table elements.
The code I have is as follows
<tr>
<td background="http://bit.ly/1HXqys9" bgcolor="#c0393f" style="background-image: url('http://bit.ly/1HXqys9');width:600px;height:240px" width="600" height="240" valign="top" >
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
<v:fill type="tile" src="hhttp://bit.ly/1HXqys9" color="#c0393f" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<p style="color:#c9be8a;font-weight:700;font-size:19px;width:220px; text-transform:uppercase ;margin:147px 0px 0px 107px; ">
Hello. This is my text.
</p>
</td>
</tr>
The problem with this is that the background image is not displayed in the following email clients
Outlook 2007, Outlook 2010, Outlook 2011, Outlook 2013, Gmail Firefox, Gmail chrome, Outlook.com explorer, Outlook.com Chrome, Yahoo Mail Explorer,Yahoo Mail Chrome
can you put the code inside a table and try. I think it will work
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td background="http://bit.ly/1HXqys9" bgcolor="#c0393f" style="background-image: url('http://bit.ly/1HXqys9');width:600px;height:240px" width="600" height="240" valign="top" >
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
<v:fill type="tile" src="hhttp://bit.ly/1HXqys9" color="#c0393f" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<p style="color:#c9be8a;font-weight:700;font-size:19px;width:220px; text-transform:uppercase ;margin:147px 0px 0px 107px; ">
Hello. This is my text.
</p>
</td>
</tr>
</table>