I've applied Bulletproof backgrounds to achieve background images for Outlook. The background images load fine, but its style/structure isn't what it should be on Outlook.
How it looks on Gmail (how I want it):
How it shows on Outlook 2007, 2010, 2013 and 2016 (Windows):
Any ideas on why this is happening?
Code:
<!--DOCTYPE html-->
<html>
<head>
<title></title>
</head>
<body>
<table leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" border="0" cellpadding="0" cellspacing="0" style="width:600px; margin:0 auto; ">
<tbody>
<tr>
<!-- Condition to allow background images to work in Outlook -->
<td class="background_image-td" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" width="600" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<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 class="background_img-container">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
<!-- Nested table for overlapping td -->
<tr>
<td class="table-td" align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table-td">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#e3e1e5" style="width:50%; opacity: 0.9; padding: 40px 40px; background-color: #e3e1e5;">
<tbody>
<tr>
<td style="color: #1c9ad6; font-size:1.5rem; font-family:'Klavika', Arial,sans-serif; text-align:left; padding:20px;">How to address your taste formulation challenges.</td>
</tr>
<tr>
<td style="padding:10px 0px;">
<!--PADDING-->
</td>
</tr>
<tr>
<td class="table-td" align="center">
<a href="#" alt="Discover more at SSW" target="_blank">
<img src="https://storage.pardot.com/213851/80839/discover_more.png" alt="Discover more at SSW" style="width:246px;">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Nested table end -->
<!-- Creating padding below nested table -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
<!-- Nested table end -->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add a height to this line of VML. If i recall Outlook won't adjust a VML shape to the content inside it.
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
One thing to be aware of is that left padding won't work inside VML in Outlook 2013/2016. If the padding is essential, try replacing it with a fixed width td and use CSS/Media Query to hide this and apply padding for mobile views.
Try adding to your mso-fit-to-shape:true to your textbox styling. This makes VML fit to your content without the need to put in heights.
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
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)
Am am trying to create a header for an email that has a background image and text centered over it. This is how it looks in "normal" email clients:
However in outlook it doesn't quit work, it ends up like this:
Are there any email gurus that can help me fix this?
Here is what I have so far (built in react):
<table width="640" cellPadding="0" cellSpacing="0" align="center" style={{ margin: '0 auto' }}>
<tbody>
<tr>
<td
height="143"
width="640"
align="center"
valign="middle"
background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg"
style={{ backgroundColor: '#00A699', backgroundSize: 'cover' }}
>
<div
dangerouslySetInnerHTML={{
__html: `<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
<v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
<v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
<![endif]-->`,
}}
/>
<table
cellPadding="0"
cellSpacing="0"
className="arb_w100 "
align="center"
style={{ margin: '0 auto' }}
>
<tbody>
<tr>
<td align="center">
<td
align="center"
valign="bottom"
className="arb_headline_1"
style={{ paddingTop: '10px' }}
>
<span
style={{
fontSize: '22px',
fontWeight: 400,
fontFamily: 'Helvetica, Arial, sans-serif',
lineHeight: '28px',
color: '#ffffff',
}}
>
For a limited time, take
</span>
</td>
</td>
</tr>
</tbody>
</table>
<div
dangerouslySetInnerHTML={{
__html: `<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->`,
}}
/>
</td>
</tr>
</tbody>
</table>
Below is the code from above translated to standard HTML:
<table width="640" cellPadding="0" cellSpacing="0" align="center" style="margin:0 auto">
<tbody>
<tr>
<td height="143" width="640" align="center" valign="middle"
background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg"
style="background-color:#00A699;background-size:cover">
<div><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
<v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
<v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
<![endif]--></div>
<table cellPadding="0" cellSpacing="0" className="arb_w100 " align="center" style="margin:0 auto">
<tbody>
<tr>
<td align="center">
<td align="center" valign="bottom" className="arb_headline_1" style="padding-top: 10px;"><span
style="font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);">For a limited time, take</span>
</td>
</td>
</tr>
</tbody>
</table>
<div><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></div>
</td>
</tr>
</tbody>
</table>
Thanks for supplying the final HTML, that helped a lot!
So you've got a couple of issues with your final HTML.
You have divs wrapping each of the MSO snippets which essentially closes off and breaks the snippets. So remove the closing div tag for the first MSO snippet and the opening div tag for the second snippet.
You'll need need to shift these two tags in, so it is only wrapping your inner content. We usually add a div to wrap the inner content to help reset the HTML in Outlook and then we can set whatever styles etc in the inner content.
I then noticed you've got a double up of the inner tags. Remove the outer tags as they don't have any styles declared, whereas the inner one does.
Amending those small things will fix your issue.
Here is the snippet cleaned up in case my instructions don't make sense:
<table width="640" cellPadding="0" cellSpacing="0" align="center" style="margin:0 auto">
<tbody>
<tr>
<td height="143" width="640" align="center" background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" style="background-color:#00A699;background-size:cover">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
<v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
<v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
<![endif]-->
<div>
<table cellPadding="0" cellSpacing="0" className="arb_w100 " align="center" style="margin:0 auto">
<tbody>
<tr>
<td align="center" className="arb_headline_1" style="padding-top: 10px;"><span style="font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);">For a limited time, take</span>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
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'm looking for a solution where I can add padding to the 'h1' tag. The markup below allows me to render the background image in outlook. However by doing so when I add padding to the td, padding is added to the background - which is not the result I want. Does anyone know how I could add padding to the h1 that is compatible with outlook email clients?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td style="padding-left:35px;" class="mbl-pad-1" background="images/banner1.jpg" bgcolor="#7bceeb" width="600" height="248" valign="middle" >
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:248px;">
<v:fill type="tile" src="images/banner1.jpg" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<h1 class="emailh1" style="font-size:65px; line-height:60px; font-family:Arial, sans-serif; color:#fff; text-align:left; margin:0;">DO YOU TRUST<br/>YOUR SOURCE?</h1>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Nest a new table inside at 100% width and add padding to that td.
So basically:
<td with background >
<table width="100%">
<tr>
<td style="padding: Xpx;">your content</td>
</tr>
</table>
</td>
After a bunch of finagling and the help of user Gortonington I was able to find a solution.By using the markup of found here Bullet Proof Background I was able to get the background image to display correctly in outlook. To add padding to the h1 tag I used the advice of Gortonigton and added an extra table with a width of 100% then added a padding style to the to align the text properly. Thanks for everyone for the help!
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="images/banner1.jpg" bgcolor="#333" width="100%" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:248px;">
<v:fill type="tile" src="images/banner1.jpg" color="#333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="mbl-pad-1" style="padding-left:35px; padding-top:60px; padding-bottom:60px;">
<h1 class="emailh1" style="font-size:65px; line-height:60px; font-family:Arial, sans-serif; color:#fff; text-align:left; margin-top:0; margin-bottom:0;">DO YOU TRUST<br/>YOUR SOURCE?</h1>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Add the margin-left:35px; for H1 tag
<td>
<h1 style="margin-left:35px;"></h1>
</td>
I would add a <div> tag around the <h1> inside <td> and add the padding to it.
<td>
<div style="padding: 10px;">
<h1>...</h1>
</div>
</td>
//EDIT:
If this is only for email, I would just use tables to space it like so:
<td>
<table>
<tr><td colspan="3" height="10"></td></tr>
<tr>
<td width="10"></td>
<td><h1>...</h1></td>
<td width="10"></td>
</tr>
<tr><td colspan="3" height="10"></td></tr>
</table>
</td>
We've been making an HTML Email with a background image in the header and some text over it. We got into some trouble to make it happen but looks like I managed to make it look in most readers though some Outlook ones didn't display the image as expected but that could be acceptable.
What I found interesting is that there doesn't seem to be any way at all to display a background image on Hotmail/Outlook.com/MSN reader. I've been using litmus.com to verify and preview and a code analysis gives me this info:
background-color is unsupported
background repeat is unsupported
background position is unsupported
background url is unsupported
background is unsupported
So while I can read some answers around Stackoverflow saying you can make it work on Hotmail using the full "background" property as Hotmail has turned into outlook.com I have the feeling such thing isn't supported anymore?
I've also used this code to display it on Outlook (I think):
<!--[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="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
The piece of code where we have the header looks like this:
<!-- Header -->
<table style="background-color: #00a8e2; position: relative; left: 0px; top: 0px;" class="full" align="center" bgcolor="#00a8e2" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background: #00a8e2 url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat center top; background-size: cover;" id="BGheaderChange" align="center">
<!--[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="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<!-- Wrapper -->
<table class="mobile" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<!-- Nav Mobile Wrapper -->
<table class="full" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" width="100%">
<!-- SORTABLE -->
<div class="sortable_inner ui-sortable">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="100" width="100%"></td>
</tr>
</table><!-- End Space -->
<!-- Text -->
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="font-size: 47px; color: #ffffff; text-align: center; font-family: Helvetica,Arial,sans-serif; line-height: 50px; font-weight:bold; vertical-align: top;" class="font32" align="center" width="100%">
<p cu-identify="element_0033719102905743314">
<span style="color: rgb(255, 255, 255); font-weight: 900; " class="font40"><span style="font-family: 'Arial'; font-weight: bolder; word-break: break-word; letter-spacing: 1.3px;"><strong>The title of the email!!</strong></span></span>
</td>
</tr>
</table>
<table cu-identifier="element_07614343859779409" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="20" width="100%"></td>
</tr>
</table>
<!-- Button -->
<!-- End Button -->
<div style="display: none;" id="element_0016519852050701167"></div><!-- End Space -->
<table cu-identifier="element_006155826625549221" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10" width="100%"></td>
</tr>
</table><div id="element_049618199923274187" style="display: none;"></div><div id="element_049618199923274187" style="display: none;"></div><!-- End Space -->
</div><!-- End SORTABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Wrapper -->
</div>
<!--[if gte mso 9.]>
</v:textbox>
</v:fill></v:rect>
<![endif]-->
</div>
</td>
</tr>
</table>
<!-- Header End -->
We bought a template to do this and are trying to modify it, the template included a background image but on testing it on different readers looks like not even the default template does it right :( (In fact I've had to be fixing it around and now looks acceptable in most readers but Outlook.com)
Thanks a lot for any help :)
Well, after some more research I found that not any single company sending me a campaign email was using background images (including companies like Amazon, the BBC, or many others with plenty of cash and incredible frontenders) which gave me a good guess that using background images on HTML Emails may not be a good approach.
I'm not sure if there is any way to make them work in Hotmail/MSN Live/Outlook.com as Litmus says it's not supported atm (March 2015) but we decided to change the design and make it work without background images.
We can still use images, just making sure we don't need them to be on the background. That was our final solution.
Thanks to those who spent their time trying to help though :)
Your code looks good to me, this is a snippet from one of my emails which works across all platforms.
<td background="hero2.jpg" bgcolor="#c8c7bc" width="600" height="294" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:294px;">
<v:fill type="tile" src="hero2.jpg" color="#c8c7bc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellspacing="0" cellpadding="0">
<tr>
<td width="598" height="293" style="text-align:left;">
<table width="400">
<tr>
<td style="padding: 30px 32px;">
<p style="font-size:36px; color: #575858; margin:0;font-family: arial, serif;">Secure your<br/>online identity</p>
<p style="font-size:26px; color: #575858; margin:24px 0 18px;font-family: arial, serif;">#DOMAINNAME# is publicly available now</p>
<a style="font-size:17px; color: #575858; margin:0;
font-weight:bold;
text-decoration:none;
padding: 6px;
border: 2px solid #575858;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: arial, serif;
" href="#"><img align="absmiddle" style="border-style: none;" src="lock2.png" alt="" /> SECURE IT NOW WITH UK2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>