Does anyone know how to align a table right within a VML textbox? Left and center work fine but Right seems to get ignored....
Heres and example of the code
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#DDDDDD" style="background-image: url('http://i.imgur.com/XCnBXwP.png');" background="http://i.imgur.com/XCnBXwP.png" height="92" valign="top"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:92px;">
<v:fill type="tile" src="http://i.imgur.com/XCnBXwP.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="300" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td bgcolor="#FF00FF" align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold;"> | This is test text | </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
Try setting your <div> to width:100%;. If that doesn't fix it, put a 100% width table in there, nest and align the child (your desired content) within that.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#DDDDDD" style="background-image: url('http://i.imgur.com/XCnBXwP.png');" background="http://i.imgur.com/XCnBXwP.png" height="92" valign="top"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:92px;">
<v:fill type="tile" src="http://i.imgur.com/XCnBXwP.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="width:100%;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<table width="300" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td bgcolor="#FF00FF" align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold;"> | This is test text | </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
Sorry, late coming to the party...
you need an extra div with align="right" before you table & contents. VML textbox ignores align on tables for some reason.
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#DDDDDD" style="background-image: url('http://i.imgur.com/XCnBXwP.png');" background="http://i.imgur.com/XCnBXwP.png" height="92" valign="top"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:92px;">
<v:fill type="tile" src="http://i.imgur.com/XCnBXwP.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<div align="right">
<table width="300" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td bgcolor="#FF00FF" align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold;"> | This is test text | </td>
</tr>
</table>
</div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
And here is the link
Related
I am trying to show the background image in Outlook using HTML emailer but it's not showing. I am getting only a blue box. I am using the below code but it's not working.
<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;height:431px;">
<v:fill type="frame" src="https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="background: url(https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png) #B5CFE3; background-size:cover; background-position:center;" height="430" width="750">
<!--add your content here-->
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Couple of issues here.
First, if you had it right, the content inside the VML would show on top. So the td with the background image for non-Outlooks would show again - but just the background colour. So we put that outside the VML.
Second, the background image should be on a <v:image ... />.
Working solution:
<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td style="background: url(https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png) #B5CFE3; background-size:cover; background-position:center;" height="430" width="750">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 450pt; height: 150pt;" src="https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png" />
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 450pt; height: 150pt;display: inline-block; position: absolute;background-color:#B5CFE3;">
<v:fill type="frame" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<p>content here</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox></v:fill></v:rect></v:image>
<![endif]-->
</td>
</tr>
</table>
You'll see I also used points instead of pixels. Outlook tends to work better that way, particularly if using text zoom. (Multiply the pixel value by 0.75 to get points)
I have background images in my email which I've configured using bulletproof backgrounds. In Litmus, the previews look exactly how I want it to be for Outlook.
However, for the latest version of Office 365 (Version 1808 - Build 10730.20102), the background image doesn't cover the td's entire width?
Preview:
The dark blue-ish color is the fallback color, but for that specific Outlook version, the background image is not covering the entire td.
Unsure why this is?
Code:
<table>
<tbody>
<tr>
<!-- Condition to allow background images to work in Outlook -->
<td style=" background-repeat: no-repeat;background-size: cover; max-height: 384px; min-width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" height="384px" width="600" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
<v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="min-height:300px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Please check again some changed.
<table bgcolor="#1f3c5a" style="vertical-align: top; background-position: top center; background-repeat: no-repeat;background-size: cover; -webkit-background-size: cover; max-height: 384px; width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<!-- Condition to allow background images to work in Outlook -->
<td height="384px" width="600" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
<v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="min-height:300px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<!-- Condition to allow background images to work in Outlook -->
<td style=" background-repeat: no-repeat;background-size: cover; max-height: 384px; min-width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" height="384px" width="1000" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
<v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="min-height:300px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Run code snipp
I am struggling with this piece of code. I have created this header which basically consist of a table with 2 rows and this what am trying to do:
The shadow (bottom part of cid:img-headerbg) has to be at the bottom (how to change cid:img-headerbg to apply on table?)
How to remove this gap, so that yellow line is at bottom?
This is my header:
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: {{accent_color}};">
<tr>
<td background="cid:img-headerbg" bgcolor="{{accent_color}}" valign="bottom" style="background-color:{{accent_color}};background-image: url('cid:img-headerbg');background-size:100% 100%; background-repeat:repeat-x; background-position: top left;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" size="100%,100%" src="cid:img-headerbg" color="#eb847b" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="max-width: 680px; margin: 0 auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table style="border:0;border-collapse:collapse;margin:0 auto;padding:0" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30">
</td>
</tr>
<tr>
<td style="margin:0 auto;padding:0;text-align:center;" align="center" width="100%">
<a href="{{base_url}}" style="display: block; top: 0; outline: medium none; text-align: center; text-decoration: none; margin:0 auto;" align="center">
<img alt="{{company_name}}" label="{{company_name}}" src="cid:img-logo" style="border: 0px; display: block; max-width: 100%; max-height: 100%; margin:0 auto;" />
</a>
</td>
</tr>
<tr>
<td style="color:#ffffff;font-family:'Roboto','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;line-height:25px;margin:0 auto;padding:15px 0;text-align:center;text-decoration:none" align="center" width="100%">
{{header_title}}<br />
<small>{{header_subtitle}}</small>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td background="cid:img-colour_stripe" bgcolor="{{primary_color}}" valign="bottom" style="background-color:{{primary_color}};background-image: url('cid:img-colour_stripe');background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" size="100%,2px" style="background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;" src="cid:img-colour_stripe" color="#eb847b" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="max-width: 680px; margin: 0 auto;background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center" bgcolor="#ffffff" style="margin: 0 auto;padding:0;">
<tr>
<td>
<![endif]-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;">
<tr>
<td height="100%" valign="top" width="100%" style="padding: 10px 0; background-color: #ffffff;margin:0;"></td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Gladly due to some research on my own i found the fix which worked fine for me:
Outlook apparently add empty paragraphs after vml shapes, which was causing the gap. I fix this by adding font-size: 0 and line-height: 0 to the parent container.
https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom
I'm trying to get the banner to center as you it sizes down to a smaller resolution as opposed to pushing the image to the right. Here is the page I am referring to. Page
I'm using 100% width.
<!-- BEGIN TEMPLATE HEADING IMAGE - Full 100% Width // -->
<tr class="heading">
<td align="center" valign="top" id="preview" bgcolor="#FFFFFF" style="background-color:#FFFFFF; padding:0px; border-bottom:1px solid #eeeeee;">
<table cellpadding="0" cellspacing="0" border="0" height="400" width="100%">
<tr>
<td background="https://www.acuity-sports.com/newsletter/images/banner10.jpg" bgcolor="#ffffff" width="100%" height="400" valign="top">
<img editable width="600" src="" style="max-width:600; border:0px; display:block;" mc:edit="header_image" />
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
<v:fill type="tile" src="images/main_image.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- END TEMPLATE HEADING IMAGE - Full 100% Width // -->
use css properties: background-position for td with your banner
background-position: center;
for your element will make center align.
Also you can do it via style attribute
style="background-position: center;"
try this code
<!-- BEGIN TEMPLATE HEADING IMAGE - Full 100% Width // -->
<tr class="heading">
<td align="center" valign="top" id="preview" bgcolor="#FFFFFF" style="background-color:#FFFFFF; padding:0px; border-bottom:1px solid #eeeeee;">
<table cellpadding="0" cellspacing="0" border="0" height="400" width="100%">
<tr>
<td bgcolor="#ffffff" width="100%" height="400" valign="top">
<img width="100%" src="https://www.acuity-sports.com/newsletter/images/banner10.jpg" style="max-width:600; border:0px; display:block;" mc:edit="header_image" />
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
<v:fill type="tile" src="images/main_image.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
try this online demo: http://jsfiddle.net/40jhoe0x/1/
thank you
I am trying to apply a repeating background to a table cell for an html email, I am using the code from http://backgrounds.cm/
Here is my TD and wrapper VML:
<td background="http://domain.com/Portals/0/emails/images/stripes-middle.png" bgcolor="#00ff00" width="346" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:346px;">
<v:fill type="tile" src="http://domain.com/Portals/0/emails/images/stripes-middle.png" color="#ff0000" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<p>LOTS OF CONTENT IN HERE</p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
However, it is renderring my background image up in the top left of the parent table! Not within the table cell. How can I fix this?
why not nest it in another table then?
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="346" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td background="http://domain.com/Portals/0/emails/images/stripes-middle.png" bgcolor="#ff0000" width="346" height="112" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:346px;height:112;">
<v:fill type="tile" src="http://domain.com/Portals/0/emails/images/stripes-middle.png" color="#ff0000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="346" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left" valign="top">
<p>LOTS OF CONTENT IN HERE</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
can't pinpoint exactly where you're going wrong, but I've never used fit-shape-to-text before and this snippet hasn't done me wrong.