I'm having an issue with Outlook (surprise) and having a background image in a table cell.
Now the problem is I can get it to work in 99% of Outlook versions except however, the desktop version of 2016 running on Windows 10.
Here is the code for the block:
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top; width: 640px;" width="640">
<tr>
<td class="w-full" background="http://via.placeholder.com/640x320" 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:1280px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table align="" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top;" width="640">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
<tr>
<td height="35" style="text-align: center;"> </td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<div style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #ffffff; text-transform: uppercase;"> <font face="'Century Gothic', Helvetica, Arial, sans-serif"><span style="font-size:44px;">Lorem Ipsum</span><br>
<br>
<span style="font-size:24px;">SOME TEXT HERE<br>
with a page break here</span></font>
<br>
<br> </div>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style=" font-family:'Century Gothic', Helvetica, Arial, sans-serif; font-size:14px; color:#ffffff; text-transform: uppercase; font-weight: bold;"> CTA Text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
and that will produce this result:
2016 Desktop
However, it kills the other versions:
All other versions
If I reduce the VML width from 1280px to what it SHOULD be (640px) it fixes all the other versions but, only gives me half an image in the desktop client (basically the polar opposite).
Now my understanding is that this desktop client is probably rendering at a higher DPI/resolution, hence why doubling the width gives me the correct result and the actual width gives me half a cell.
My question is, is there a work-a-round/hack that will allow me to display at double width in that client and have the others ignore this rule?
Any help would be appreciated as I can't find a shred of info anywhere, thanks in advance.
After a week of hunting, I came across this article that addresses the issue I was having:
Solving DPI scaling issues with HTML email in Outlook
It was very clear on why it breaks and how to counter it so I would highly recommend checking it out to fully understand the issue.
However, If you're in a rush and just want the code for a quick fix, you'll need to insert the following code in to the HTML tag of your template:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
This tells Outlook what to expect
You'll then need to insert this code into the HEAD section of your template just before the close:
<Head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</Head>
and finally, as before (see original question), you'll need to tell the cell exactly what it needs to do with something similar to:
<!--[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="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
Obviously, tweak as you need to for your own emails but, this worked for me.
I hope this answer helps others as it helped me when it boils down to DPI scaling on newer machines with higher resolution monitors!
Full credit to "James" for this solution.
Related
I am creating a new template for a newsletter. The following code produces what I want to see but as you will all know background images do no play well in Outlook.
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td style="height: 60px; padding: 5px; border-radius: 5px 5px 0px 0px; vertical-align: middle; background-color: white;"
background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png">
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png"
align="right"></p>
</td>
</tr>
</tbody>
</table>
Intended result
I found an answer on here recommending using https://backgrounds.cm/ so here is the code I got back.
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
<v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png"
align="right"></p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Which give me this in Outlook
Outlook Weirdness
I have tried to fix this but I'm not a particularly skilled programmer. I can usually intuit what the problem is but I'm at a loss here.
The grey bar definitely needs to be a background image as I need to place text and images on top (the smaller images will be links at a later stage).
Hope you guys can help.
Images are normally inline elements, not block. You can't make inline elements "align" left or right. So putting them within a block such as a paragraph may seem intuitively to solve that issue, except that the alignment needs to occur via that block element (the paragraph, in this case).
Since you want the text aligned left and the images aligned right, we really need two block level elements, and the best way to do that is to create a table.
Ensure you have the table going the full width of the available space (width="100%").
I haven't addressed default padding and other defaults, but here's the basic way forward that works:
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
<v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%">
<tr>
<td>
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong></p>
</td>
<td style="text-align: right;"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png" ><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png">
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
P.S. you might think you can just add "display:block" to the images, but Outlook doesn't let you do that. It will just ignore that style.
After doing research I'm coming to the realization that this might not be possible in all clients but I wanted to ask if anything has changed recently in the email world that would let me create something like in the image below. I want that little blue ribbon with text to appear on top of the image. From what I've seen it doesnt look like negative margins or absolute positioning has the support I need. Is there some hacky workaround people have come up with for something like this?
As pointed out by others...
You could use the VML option, however the padding used to push the tab down could vary between email clients, so definitely worth testing out.
A set height on a table cell and using vertical align bottom could be another method to test, but personally I always stick to padding as it's always been solid for me.
Although I should note... I don't think I've ever had to align something to the very bottom of a bg image. I'm usually centering or padding elements from the top of the image.
Good place to start though:
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td background="https://via.placeholder.com/359x174" bgcolor="#00e5ff" height="174" styke="width:100%;max-width:359px;height:174px;" valign="top" width="359">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:359px;height:174px;">
<v:fill type="tile" src="https://via.placeholder.com/359x174" color="#00e5ff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:139px 0 0 0;">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#2979ff" style="font-family:arial, Helvetica, sans-serif; font-size:15px; line-height:20px; font-weight:600; color:#ffffff; padding:8px 15px; border-radius:0 7px 0 7px;">
Earn $10 off
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
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.