I'm using the image as a background in my HTML-email, to get the ability to allocate text and button over the top layer of the image and it is working fine for every email client beside the MS Outlook 2013 on Windows 7.
For some reason, once the user got the email and click on the button (or wherever image area) there is weird frame appears around the image and that frame looks like user can edit that image (rotate or resize), but he can't, it's just a frame.
I can't figure out how can I get rid of that frame. Another problem is the Litmus doesn't show any issue with the code so it's kina like impossible to fix without actual sending. Please help!
Using all header as one image isn't an option because the client requires the ability to change the text over himself.
Below the part of the code for the header only but here is the link on the code of the entire email https://pastebin.com/edYR2eVm and the Litmus project https://litmus.com/builder/da4ef27
<!-- HERO : BEGIN -->
<tr>
<!-- Bulletproof Background Images c/o https://backgrounds.cm -->
<td background="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYiUYrvVY_LbHtpJf-iiBrk_3BXOwqHyulAj0sDk3gJKOxAl6FkA" bgcolor="#222222" align="center" valign="top" style="text-align: center; background-position: center center !important; background-size: cover !important;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height:380px; background-position: center center !important;">
<v:fill type="tile" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYiUYrvVY_LbHtpJf-iiBrk_3BXOwqHyulAj0sDk3gJKOxAl6FkA" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="500">
<tr>
<td align="center" valign="middle" width="500">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:500px; margin: auto;">
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
</tr>
<tr>
<td align="center" valign="middle">
<table>
<tr>
<td valign="top" style="text-align: center; padding: 60px 0 10px 20px;">
<h1 style="margin: 0; font-family: 'Montserrat', sans-serif; font-size: 30px; line-height: 36px; color: #ffffff; font-weight: bold;">WELCOME %%FIRST NAME%%</h1>
</td>
</tr>
<tr>
<td valign="top" style="text-align: center; padding: 10px 20px 15px 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #fff;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.</p>
</td>
</tr>
<tr>
<td valign="top" align="center" style="text-align: center; padding: 15px 0px 60px 0px;">
<!-- Button : BEGIN -->
<center>
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="text-align: center;">
<tr>
<td style="border-radius: 50px; background: #26a4d3; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #26a4d3; border: 15px solid #26a4d3; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 50px; font-weight: bold;" class="button-a">
<span style="color:#ffffff;" class="button-link"> ACCESS ACCOUNT </span>
</a>
</td>
</tr>
</table>
</center>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<!-- HERO : END -->
Related
I have a table within a table and the table inside is not centering for some reason. I can't figure out why, maybe the VML is messing with it somehow? The h3 tag above the table seems to center just fine. I have the background of the table to be blue just so I can see it clearer. Here's my email template:
<body>
<div style="text-align: center; padding: -8px; font-family: brandon-grotesque-regular, Lato, sans-serif;">
<table style="width: 100%; text-align: center;" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr style="text-align: center;">
<td align="center" bgcolor="#ffffff" background="http://f52c38c7.ngrok.io/y6_warrior_challenge_email/images/bg_y6.png" valign="top" style="background-image: url('http://f52c38c7.ngrok.io/y6_warrior_challenge_email/images/bg_y6.png'); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #ffffff; text-align: center; align: center;" width="680" height="960">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 510pt; height:720pt;">
<v:fill type="frame" src="https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding: 48px;">
<tbody>
<tr>
<td align="center" style="text-align: center;">
<h3 style="color: #043d52; font-size: 32px; font-weight: bolder; padding: 32px 0 32px 0; margin: 0">
this is text
</h3>
<center>
<table align="center" style="background: blue; text-align: center;">
<tbody>
<tr>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 145px; width: 100%;" alt="Shirt image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 79px; width: 100%;" alt="Hat image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 139px;" alt="Water bottle image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 136px; width: 100%;" alt="Hoodie image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
</tr>
<tr>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</body>
This is what it looks like in Outlook 365:
I highlighted the background to be gray so you can see it clearer, but the blue table is definitely not centered. I even tried using the <center> tag but it's still not working.
I am trying to create the header section for a under construction HTML email. I am currently using background-img url to use the image with content overlaying it. But Outlook 2007, 2010 and 2016 does not support background-images on tables. I have found this workaround through the use of divs. However, div's are not as consistent as tables (for emails) so I want to avoid the use of div's.
Is there a way to achieve this strictly though table structure?
Current approach:
<table border="0" cellpadding="0" cellspacing="0" style="max-width:692px; background-image: url(https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/header-image.png);" width="692" height="400">
<tbody>
<tr>
<td valign="top" align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding:25px 28px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;">
<a href="#" target="_blank">
<img alt="LOGO" src="#" style="display:block;border:0px;
font-family:Helvetica,Arial,sans-serif;color:#ffffff">
</a>
</td>
<!-- SOCIAL ICONS -->
<td style="text-align: right;">
<!--YouTube -->
<img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/youtube-icon.png">
<!--Twitter -->
<img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/twitter-icon.png">
<!--LinkedIn -->
<img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/linkedin-icon.png">
<img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/facebook-icon.png">
</td>
</tr>
<!----------------->
<!-- HEADER TEXT -->
<!----------------->
<tr>
<td colspan="2" style="padding-top:40px;">
<!-- PADDING-->
</td>
</tr>
<tr>
<td colspan="2" style="height: 100px; color: #fff; font-family:'Open Sans',Helvetica,Arial,sans-serif; text-align: center; font-size: 26px; padding-bottom: 10px; text-transform: uppercase;">
TEXT<br> HERE
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
If you want a background image to work in Outlook 2007-2016, there is only one way it will work and that is to use Vector Markup Language (VML). It doesn't really use divs, it uses xml. The div is the wrapper.
I made a Fiddle so you can see this code in action: https://jsfiddle.net/wallyglenn/7zLaLrfx/
This is the code:
<div style="background-color:#ff0000; width:600px;">
<!--[if (gte mso 9)|(IE)]><!-- -->
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
</v:background>
<![endif]-->
<table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
<h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
Background Image with Text on Top
</h1>
</td>
</tr>
</table>
</div>
What you are doing is inserting a piece of xml that directs Outlook to include a background image. Outlook will ignore your background="" but display the rest of the table.
This works reliably and sadly, there really is no alternative.
The original code was taken from https://backgrounds.cm with modifications.
Good luck.
This is what you might be looking for. I have been eliminating divs from my code as much as possible unless i am coding hybrid. Below is a code i have customized from the link you mentioned in your post.
Your content will be the 3 tables inside the VML code. Be sure to change the width and height of the VML to make it work. Just a note as i forget at times but pick it up during testing.
#media only screen and (max-width:480px) {
.hidden{display:none !important;}
.backgroundCover{background-size: cover; background-position:center center !important;}
}
<table style="max-width: 600px;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="backgroundCover" style="background: url('https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg'); background-image: url('https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg'); background-repeat: no-repeat;">
<!-- [if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:338px;">
<v:fill type="frame" src="https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg" color="#463783" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table class="hidden" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="height: 70px; line-height: 0px; font-size: 0px;" height="120"></td>
</tr>
</tbody>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 30px; text-align: center; color: #ffffff; font-weight: bold; padding: 50px 10px 0px 10px;">Beautiful background in email</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 20px; text-align: center; color: #ffffff; font-weight: normal; padding: 0px 0px 50px 0px;">no more crazy nights</td>
</tr>
</tbody>
</table>
<table class="hidden" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="height: 70px; line-height: 0px; font-size: 0px;" height="120"></td>
</tr>
</tbody>
</table>
<!-- [if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table>
What was done above:
Created outer table with 3 background images placed in td. This means that every combination of the background for web is available.
Inside the above table VML is added. Things to change on VML: Image path, image dimensions (height & width) and fall back color.
Inside the VML comes all the HTML that is needed to style the block which will go above the background image.
There are two extra tables added which is being used a space both the class of hidden. If media queries are read by the email client it will hide those tables.
I had written a blog post about this which can be found here: #SyferDoesEmail.
Let me know if it works for you.
Try to use 'background' property instead 'background-image':
background: url('image.jpg') no-repeat cover;
I have this simple table newsletter design and I cannot identify what causes the table to be wider than I set it to be.
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" max-width="600" style="height:auto;" >
<tr>
<td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600" height="440" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat;" valign="middle"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="1" cellpadding="0" cellspacing="30" max-width="600">
<tr>
<td align="center"><br>
<img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88" height="47" align="center" link="" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
WEBSITE</anpa>
<anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
FORWARD</anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
SUBSCRIBE</anpa>
<anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
UNSUBSCRIBE<br>
</anpa></font>
</td>
</tr>
<tr>
<td width="600" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org">
Baltic Development Forum</anpa></font></td>
</tr>
<tr>
<td align="center">
<font style="font-weight:100;font-family:Myriad Pro; font-size: 12px; color: #ffffff !important;">
LATEST BDF NEWS ESPECIALLY FOR YOU
</font></td>
</tr>
<tr>
<td align="center">
<!-- <td align="center" style="background-image:url(http://img.anpdm.com/BalticDevelopmentForum/buttonEmpty.png); background-repeat: no-repeat; background-size: 184px 38px; background-position: center; padding: 9px;" alt="">
<anpa href="http://www.bdforum.org" style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; vertical-align: middle;">
WEBSITE</anpa>
</td>-->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
If you could help me I would really appreciate it. I am kind of a beginner. Especially with writing html for emails as its super annoying with different supports
because you have to put max-width="600" inside the style attribute since max-width not a valid attribute for table, fix your problem like this style="height:auto;max-width:600px"
UPDATE
To handle the extra pixels on right and bottom add this style="padding: 0;width: 100%;" to the first td
Put max-width attribute inside style tag
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px" >
For border issue, you can update table tag like
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px;border-bottom: none!important;border-right: none !important;" >
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px;border-bottom: none!important;border-right: none !important;" >
<tr>
<td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600" height="440" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat;" valign="middle"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="1" cellpadding="0" cellspacing="30" max-width="600">
<tr>
<td align="center"><br>
<img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88" height="47" align="center" link="" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
WEBSITE</anpa>
<anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
FORWARD</anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
SUBSCRIBE</anpa>
<anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
UNSUBSCRIBE<br>
</anpa></font>
</td>
</tr>
<tr>
<td width="600" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org">
Baltic Development Forum</anpa></font></td>
</tr>
<tr>
<td align="center">
<font style="font-weight:100;font-family:Myriad Pro; font-size: 12px; color: #ffffff !important;">
LATEST BDF NEWS ESPECIALLY FOR YOU
</font></td>
</tr>
<tr>
<td align="center">
<!-- <td align="center" style="background-image:url(http://img.anpdm.com/BalticDevelopmentForum/buttonEmpty.png); background-repeat: no-repeat; background-size: 184px 38px; background-position: center; padding: 9px;" alt="">
<anpa href="http://www.bdforum.org" style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; vertical-align: middle;">
WEBSITE</anpa>
</td>-->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
Hope it helps.
In am creating a bunch of emails for an email-flow. For some reason I can't find, when I test the email in the GMAIL APP there is some unwanted grey lines at 1px height.
I just can't find out why they are there. It seems that it's only in the GMAIL APP - I am testing using litmus.com
The HTML for the email:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vores 5 bedste råd inden boligkøbet</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
<!--[if mso]>
<style> body,table tr,table td,a, span,table.MsoNormalTable { font-family:Arial, Helvetica, sans-serif !important; }
</style>
<!--<![endif]-->
<style type="text/css">
#media screen and (max-width: 525px) {
h1 {
font-size: 30px !important;
}
}
</style>
</head>
<body bgcolor="#3d6e9c" style="padding: 0; margin: 0;">
<div style="background-color:#3d6e9c;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://naborapporten.its-umbraco.dk/emails/bg.jpg" color="#3d6e9c"/>
</v:background>r
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top" align="left" background="http://naborapporten.its-umbraco.dk/emails/bg.jpg">
<center>
<!--[if (gte mso 9)|(IE)]><table width="650" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table cellspacing="0" cellpadding="0" border="0" style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td background="http://naborapporten.its-umbraco.dk/emails/bg.jpg" align="center" style="font-family: Arial; padding-top: 100px; padding-bottom: 100px; padding-left: 15px; padding-right: 15px;">
<table border="0" align="center" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 650px; border-collapse: collapse; border: none; ">
<tr>
<td height="43" valign="bottom"><img src="http://naborapporten.its-umbraco.dk/emails/top.png" valign="bottom" style="font-family: Arial; max-width: 650px; width: 100%; height: auto; vertical-align: bottom; border-collapse: collapse;"></td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="font-family: Arial; padding-left: 15px; padding-right: 15px; padding-top: 45px; padding-bottom: 45px; border-collapse: collapse;">
<h1 style="color: #707986; font-size: 45px; margin-bottom: 0; mso-line-height-rule: exactly; line-height: 90%;"><b><b>Din Naborapport™</b></b></h1>
<!--[if (gte mso 9)|(IE)]><table width="470" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; max-width: 470px; width: 100%;">
<tr>
<td align="center" style="color: #707986; font-size: 18px; padding-top: 45px; border-collapse: collapse;"><b>#Model.FullAddress</b></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]><table width="470" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 470px; width: 100%; border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#ffffff" valign="middle" style="padding-top: 45px; padding-bottom: 45px; padding-left: 15px; padding-right: 15px;"><img src="http://naborapporten.its-umbraco.dk/gfx/email/knap_til_naborapport.png" border="0" style="border: none; max-width: 100%; height: auto;"></td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#ffffff" style="font-family: Arial; max-width: 470px; width: 100%; padding-left: 15px; padding-right: 15px;">
<h2 style="color: #1fbba7; font-size: 30px; font-weight: bold;">Naborapporten giver dig et unikt indblik i nabolaget</h2>
<table>
<tr>
<td align="center" valign="middle" style="font-size: 18px; color: #5d6573; ">
<p><b>Hvilke typer er dine naboer?</b></p>
<p><b>Hvad er afstanden til skole, indkøb og transport?</b></p>
<p><b>Hvad beskæftiger dine naboer sig med til dagligt?</b></p>
<b>Hvad er prisudviklingen på boliger i området?</b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td valign="middle" align="center" bgcolor="#ffffff" style="font-family: Arial; padding-top: 45px; padding-left: 15px; padding-right: 15px; border-collapse: collapse;">
<span style="color: #1fbba7; font-size: 18px; font-weight: bold;">Få gode råd til huskøbet på vores boligunivers</span>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 45px; padding-bottom: 45px; padding-left: 15px; padding-right: 15px; border-collapse: collapse;">
<img src="http://naborapporten.its-umbraco.dk/emails/kvittering/knap_book.png" style="border: none; max-width: 100%; height: auto;" />
</td>
</tr>
<tr>
<td bgcolor="#eeeeee" align="center" valign="middle" style="padding-top: 45px; border-collapse: collapse;">
<img src="http://naborapporten.its-umbraco.dk/emails/logo.png">
</td>
</tr>
<tr>
<td valign="top" style="border-collapse: collapse;"><img src="http://naborapporten.its-umbraco.dk/emails/bund.png" valign="top" alt="" style="max-width: 100%; height: auto;"></td>
</tr>
<tr>
<td height="92" align="center" valign="middle" style="border-collapse: collapse;"><b>Afmeld</b></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</div>
</body>
</html>
It looks to me like your background color is bleeding through. This is a common problem on iOS devices as well as some other apps. Is there a reason why you're setting a background color on the body and first div tag?
Make table border as "0"
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
Hope this will help you!
As Gokul Maha recommends, I'd change the border="1" on line 35 to border="0". But it's odd that a single instance of that would cause three horizontal borders to appear.
Regarding emails previews in Litmus, they are not always 100% accurate due to the way they open an email in their inbox and create a screenshot. I recommend testing this using an actual copy of Gmail app, if you are able to do that. Results may differ. Litmus saves a ton of time, but for the small details it's always good to know how it looks on an actual device running the actual email app.
i recently created a similar Mail with the same problem. In my case I tried to border the whole Mail, wich worked, but it created small borders around img's and some other objects.
To fix this i added style="border: none;" to each first td after the table with the border around. This fixed it for me.
Also try putting the border on a td. The border doesn't seem to show up in some Outlook Versions, if they are on a table.
If you dont want a Border at all, you sould set the border="1" in line 35 to 0.
Hi I fixed this issue by putting bgcolor="#ffffff" style="background-color:#ffffff;" on the body tag and on the td tag and also in every table tag . All the gray lines disappeared from gmail app.
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>