I've been trying to figure out how to create a responsive email that will stack two columns on a mobile device, but I keep running into issues. If I get the columns to stack on mobile, they tend to stack on desktop email clients too, instead of being two columns side by side. If I get the columns side by side on desktop, they won't stack right on mobile. It seems like once I get one thing fixed, another thing goes wrong. Can anyone take a look at my code to see if there's something I've missed? It would be greatly appreciated! By the way, I'm using foundation from ZURB as my css file:
http://foundation.zurb.com
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="%%subject%%" />
<title></title>
<link rel="stylesheet" href="foundation.css" />
</head>
<body bgcolor="#f0f1f2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; background-color: #f0f1f2; margin: 0; padding: 0;">
<style type="text/css">
#outlook a {
padding: 0;
}
.body{
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
}
/* hide unsubscribe from forwards*/
blockquote .original-only, .WordSection1 .original-only {
display: none !important;
}
#media only screen and (max-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
#preheaderCell{padding:10px !important;}
#bodyCell{padding:0 10px 0 !important;}
#footerCell{padding:20px 10px 0 !important;}
#templateContainer{
max-width:600px !important;
width:100% !important;
}
h1{
font-size:26px !important;
line-height:100% !important;
}
h2{
font-size:26px !important;
line-height:100% !important;
}
h3{
font-size:16px !important;
line-height:100% !important;
}
h4{
font-size:16px !important;
line-height:100% !important;
}
#headerImage{
height:auto !important;
max-width:600px !important;
width:100% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
}
.bodyContent{
font-size:18px !important;
line-height:125% !important;
}
.footerContent{
font-size:14px !important;
line-height:115% !important;
}
.button{
width:30% !important;
}
.note{
font-size:14px !important;
line-height: 17px !important;
}
}
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" width="100%">
<tbody>
<!-- BEGIN PREHEADER // -->
<tr>
<td align="center" id="preheaderCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important; margin: 0; padding: 20px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; width: 600px; ">
<tbody>
<!-- <tr>
<td pardot-region="preheader_content01" align="center" class="preheaderContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #808080; font-family: Helvetica; font-size: 10px; line-height: 12.5px; text-align: center; " valign="top" width="180">
Email not displaying correctly?
View it in your browser.
</td>
</tr> -->
</tbody>
</table>
</td>
</tr>
<!-- // END PREHEADER -->
<tr>
<td align="center" id="bodyCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important; margin: 0; padding:0 20px 20px;" valign="top">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: separate !important; width: 600px; -moz-box-shadow: 0px 0px 10px #ccc; -webkit-box-shadow: 0px 0px 10px #ccc; box-shadow: 0px 0px 10px #ccc;">
<tbody>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width:100%!important;" width="100%">
<tbody><tr>
<td bgcolor="#3f7f80" align="left" class="headerContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; font-family: Helvetica; font-size: 20px; font-weight: bold; line-height: 20px; text-align: left; vertical-align: middle; padding: 16px;" valign="top" pardot-region="header_image"></td>
</tr>
</tbody></table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 20px 0;" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody><tr>
<td pardot-region="body_content" align="left" class="bodyContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #3f4040; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; line-height: 21px; text-align: left; padding:25px 0 25px;" valign="top">
<h3 style="color: #000000 !important; display: block; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; font-weight: Bold; letter-spacing: normal; line-height: 16px; margin: 0; padding-bottom:15px; text-align: left">Hi, <%First%></h3>
<h1 style="color: #000000 !important; display: block; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 26px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 26px; margin: 0; padding-bottom:15px; text-align: left">TITLE</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
<br>
</td>
</tr>
<tr>
<td pardot-region="body_content" align="center" class="bodyContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #3f4040; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; line-height: 21px; text-align: center; padding:0px 0 0px; valign="top">
<div class="row">
<div class="large-6 medium-6 columns">
<br>
<div>
<b>dsafhjl dsfhajlk hj hjk hjkds hdfskj:</b><br>
hdlkjs hfkjlsdhflkjs dhfkjld shkljfhkla jsh dkljs hfklj dsah kjhfaklj hdflkj shaflk jdshfkjlh sadlfhjlsdakhjf
</div>
</div>
<div class="large-6 medium-6 columns">
<div>
<img src="xxx" alt="" border="0" width="283px" height="180px">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img height="25px" src="x" alt="">
</td>
</tr>
<tr>
<td style="text-align: left;">
<span class="note" style="font-family: Helvetica Neue, Helvetica, sans-serif; font-weight: 200; color: #7e7f80; font-size: 12px; line-height: 14px;"><i>djskhfk dshkjlfh dshfalkj fhdjsl</i></span><br><br>
</td>
</tr>
</tbody></table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width:100%!important;" width="100%">
<tbody><tr>
<td bgcolor="#3f7f80" align="left" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 20px; font-weight: bold; line-height: 10px; text-align: left; vertical-align: middle;" valign="top" pardot-region="header_image"> </td>
</tr>
</tbody></table>
<!-- // END HEADER -->
</td>
</tr>
</tbody></table>
<!-- // END TEMPLATE -->
</td>
</tr>
</tbody></table><br>
You're better off using Zurb's Ink for this: http://zurb.com/ink/. Foundation for websites isn't made for emails but Foundation Ink is. Also the cool Playground with templates here: http://zurb.com/playground/responsive-email-templates.
I created a codepen here in case someone wants to delve deeper into this with real code: http://goo.gl/aCShcF
Related
I'm working on an HTML email and I'm running into a few blockers. I can't figure out how to center the image header or how to change the opacity of the background image.
I've tried multiple different class movements and dabbled with the CSS but to no success. I've attached a mockup of how it should look (the height should be desktop height)
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NASCAR Fan Email</title>
<style>
#media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body style=" font-family: sans-serif; -webkit-font-smoothing: antialiased; line-height: 2.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="imageheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This
is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 800px; padding: 10px; width: 800px; margin: 0 auto;" width="800" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 800px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png'); width: 100%; background-repeat: no-repeat; padding: 50px 0px 50px 0px; border-bottom: 10px solid red;" width="100%">
<table role="presentation" class="main" style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg'); width: 100%; background-repeat: no-repeat; padding: 60px;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Hello,</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<p class="targetlink">
<!-- <a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a></p> -->
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
If you are unable to click the link, please copy and past the full URL below into your browser:</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;" width="100%">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase; text-decoration: none;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
You can't have background images in emails with text on top, here is why:
First of all to center the background you can use (see snippet)
background-position: center center;
and to add opacity you can do things like
opacity:0.5
or
background-color:rgba(0, 0, 0, 0.5)
Although none of the previous will work on a background, you would need to add it as an image and then position it absoulute behinde the text. And here comes the greatest problem.
Emails are a complicated things to code because of compatibilty issues, for instance, your css styles might not work because some email clients are not compatible with <style>, as well as media queries, or even styles like opacity.
It is recommended that all CSS is inline and work strictly with tables, (which you already do, great!). But when it comes to images, images must be as <img/> and not css background, because many email clients will not show the image, and that's why you can't have text on top of them. It is true that you can use position absolute as I said before, but css positining is not compatible with emals.
That's why, see all the promotional emails that you get and none of them uses background images.
Another tip: make sure your html has no errors, or many email clients like gmail will consider it as spam. For instance I noticed that you have a <table> followed by another <table>, when you must have <table><tr></td> or <th> and then another <table> (also don't foget of <tbody> )
I found a great comaptibility gude:
https://www.campaignmonitor.com/css/
Good luck!
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NASCAR Fan Email</title>
<style>
#media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body style=" font-family: sans-serif; -webkit-font-smoothing: antialiased; line-height: 2.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="imageheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This
is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 800px; padding: 10px; width: 800px; margin: 0 auto;" width="800" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 800px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png'); width: 100%; background-repeat: no-repeat; background-position: center center;padding: 50px 0px 50px 0px; border-bottom: 10px solid red; background-position: center center;" width="100%">
<table role="presentation" class="main" style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg'); width: 100%; background-repeat: no-repeat; padding: 60px;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Hello,</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<p class="targetlink">
<!-- <a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a></p> -->
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
If you are unable to click the link, please copy and past the full URL below into your browser:</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;" width="100%">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase; text-decoration: none;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
I am currently trying to get background images to work in outlook to be able to create more creative e-mails. I have added the bulletproof background to the td. And it shows great everywhere else.
But not in outlook. I have tried changing to Points instead of px, with same result.
Does anyone have any good idea's how this can be solved?
How it looks
The code I have done is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<style type="text/css">
#outlook a {
padding: 0;
}
.body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
mso-line-height-rule: exactly;
}
img {
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
/* hide unsubscribe from forwards*/
blockquote .original-only,
.WordSection1 .original-only {
display: none !important;
}
#media only screen and (max-width: 480px) {
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: none !important;
}
/* Prevent Webkit platforms from changing default text sizes */
body {
width: 100% !important;
min-width: 100% !important;
}
/* Prevent iOS Mail from adding padding to the body */
#bodyCell {
padding: 10px !important;
}
#templateContainer {
max-width: 600px !important;
width: 100% !important;
}
h1 {
font-size: 24px !important;
line-height: 125% !important;
}
h2 {
font-size: 20px !important;
line-height: 125% !important;
}
h3 {
font-size: 18px !important;
line-height: 125% !important;
}
h4 {
font-size: 16px !important;
line-height: 125% !important;
}
#templatePreheader {
display: none !important;
}
/* Hide the template preheader to save space */
#logoImage {
height: auto !important;
max-width: 150px !important;
width: 100% !important;
}
.headerContent {
font-size: 20px !important;
line-height: 125% !important;
}
#bodyImage {
height: auto !important;
max-width: 560px !important;
width: 100% !important;
}
.bodyContent {
font-size: 18px !important;
line-height: 125% !important;
}
.templateColumnContainer {
display: block !important;
width: 100% !important;
}
.bannerImage {
height: auto !important;
max-width: 460px !important;
width: 100% !important;
}
.imageContent,
.container {
padding-left: 0px!important;
padding-right: 0px!important;
}
.footerContent {
font-size: 12px !important;
line-height: 115% !important;
}
}
</style>
<body bgcolor="#191919" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; background-color: #191919; margin: 0; padding: 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #191919; border-collapse: collapse !important; height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important"
width="100%">
<tbody>
<tr>
<td align="center" id="bodyCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important;margin: 0; padding: 0 0 20px 0;" valign="top">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; width: 624px;">
<tbody>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templatePreheader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #000000; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt"
width="100%">
<tbody>
<tr>
<td align="center" class="preheaderContent" pardot-region="preheader_content00" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #ffffff; font-family: Helvetica; font-size: 10px; line-height: 12px; text-align: center; letter-spacing:2; padding: 15px 20px;"
valign="top">OFFICIAL COMMUNICATION</td>
</tr>
</tbody>
</table>
<!-- // END PREHEADER -->
</td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #191919; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
<tr>
<td align="center" class="headerContent" height="140" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #191919; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
<tr>
<td align="left" style="padding-left: 30px;"><img alt="" height="50" id="logoImage" src="https://promo.mantracgroup.com/l/617741/2019-09-23/ftgc4/617741/66681/Logo_Mantrac.png" style="-ms-interpolation-mode: bicubic; height: auto; outline: none; text-decoration: none; max-width: 200px; border: 0;"
width="200"></td>
<td align="right" pardot-region="phone_content00" style="padding-top:12px;padding-right:30px;color: #FEC70B !important; display: block; font-family: Helvetica,sans-serif; font-size:24px; font-style: normal;text-transform:uppercase; font-weight: bold; letter-spacing: normal;margin: 0; text-align: right">
<font color="#FEC70B" face="Helvetica,sans-serif">000-0000-0000</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td background="https://promo.mantracgroup.com/l/617741/2020-03-23/th6sg/617741/89519/CRC_ghana_bg_email.png" bgcolor="#2c363a" width="624px" height="786" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:100;width:624px;height:786px;">
<v:fill type="tile" src="https://promo.mantracgroup.com/l/617741/2020-03-23/th6sg/617741/89519/CRC_ghana_bg_email.png"color="#2c363a"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0" celllspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="color: #FEC70B !important; margin-left:-30px!important; display: block; font-family: Helvetica,sans-serif; font-size: 38px; font-style: normal;text-transform:uppercase; font-weight: bold; letter-spacing: normal; line-height: 43px; text-align:left!important; margin: 0; margin-top:15px; text-align: center;padding-bottom:25px;padding-left:10%;padding-right:10%;"><span style="color:#FFFFFF;"><font face="Helvetica,sans-serif;display:block;">WONDER WHERE YOUR EQUIPMENT COMES BACK TO LIFE?</font></span></td>
</tr>
<tr>
<td>
<p style="text-align:left;margin:0; padding-left:10%;">
<img height="45" src="https://promo.mantracgroup.com/l/617741/2019-10-08/glkpx/617741/68593/btn_sample.png" width="168">
</p>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<!--begin content -->
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
<!-- End content -->
<!-- BEGIN FOOTER -->
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;mso-table-lspace: 0pt; mso-table-rspace: 0pt;background-color:#000000;" width="100%">
<tbody>
<tr>
<td align="center" style="padding-top: 30px;"><img src="https://promo.mantracgroup.com/l/617741/2019-09-23/ftgc4/617741/66681/Logo_Mantrac.png" style="-ms-interpolation-mode: bicubic; height: auto; outline: none; text-decoration: none; max-width: 84px; border: 0;" width="84"></td>
</tr>
<tr>
<td align="center" class="footerContent" pardot-region="footer_content01" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #D8D8D8; font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: center; padding: 20px 30px 10px 30px;"
valign="top">© {{Current_Year}} Mantrac Group. All rights reserved.</td>
</tr>
<tr>
<td align="center" class="footerContent original-only" pardot-region="footer_content02" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #D8D8D8; font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: center; padding: 0 30px 20px;"
valign="top">You’re receiving this email because you’ve agreed to receive notifications from Mantrac Group. If you’d prefer not to receive updates, you can manage your preferences or unsubscribe from all.</td>
</tr>
</tbody>
</table>
<!-- END FOOTER -->
</body>
</html>
I think mso-width-percent:100; should be mso-width-percent:1000;
Edit : mso-width-percent value is getting divided by 10 :
It might look confusing at first, but mso-width-percent is actually quite simple. The number you need to pass to it is ten times the percentage you'd like. This means that mso-width-percent: 1000; is actually 100%, or full page width
Source : https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds/
Forgive my ignorance if this is an easy fix, but I don't work with HTML AT ALL, so please answer in very remedial terms :-)
Thanks so much for your help.
I've been trying to learn HTML on the fly here to figure it out but am failing miserably
#outlook a {
padding: 0;
}
.body{
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
}
/* hide unsubscribe from forwards*/
blockquote .original-only, .WordSection1 .original-only {
display: none !important;
}
#media only screen and (max-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
#bodyCell{padding:10px !important;}
#templateContainer{
max-width:600px !important;
width:100% !important;
}
h1{
font-size:24px !important;
line-height:100% !important;
}
h2{
font-size:20px !important;
line-height:100% !important;
}
h3{
font-size:18px !important;
line-height:100% !important;
}
h4{
font-size:16px !important;
line-height:100% !important;
}
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
#headerImage{
height:auto !important;
max-width:600px !important;
width:100% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
}
.templateColumnContainer{display:block !important; width:100% !important;}
.columnImage{
height:auto !important;
max-width:260px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.footerContent{
font-size:14px !important;
line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="{{Subject}}" />
<title>{{Subject}}</title>
</head>
<body bgcolor="#FAFAFA" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; background-color: #FAFAFA; margin: 0; padding: 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FAFAFA; border-collapse: collapse !important; height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" width="100%">
<tbody>
<tr>
<td align="center" id="bodyCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important; border-top-width: 4px; border-top-color: #dddddd; border-top-style: solid; margin: 0; padding: 20px;" valign="top"><!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; width: 600px; border: 0px solid #dddddd;">
<tbody>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templatePreheader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
<tr style="">
<td align="left" class="preheaderContent" pardot-region="preheader_content00" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #808080; font-family: Helvetica; font-size: 10px; line-height: 12.5px; text-align: left; padding: 10px 20px;" valign="top"><img alt="" border="0" height="40" src="http://info2.jove.com/l/283112/2017-04-18/r7gz/283112/11321/logo.png" style="width: 79px; height: 40px; border-width: 0px; border-style: solid;" width="79"></td>
<td align="left" class="preheaderContent" pardot-region="preheader_content01" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #808080; font-family: Helvetica; font-size: 10px; line-height: 12.5px; text-align: left; padding: 10px 20px 10px 0;" valign="top" width="180">
<div style="text-align: right;"><br>
View this email in your browser.</div>
</td>
</tr>
</tbody>
</table>
<!-- // END PREHEADER --></td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
</tbody>
</table>
<!-- // END HEADER --></td>
</tr>
<tr pardot-repeatable="" style="">
<td align="left" class="bodyContent" pardot-data="link-color:#00d369;" pardot-region="body_content00" style="color: rgb(3, 3, 3); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; text-align: left; padding: 20px; background: rgb(255, 255, 255);" valign="top">
<p>Dear Dr. {{Recipient.LastName}},</p>
<p dir="ltr">We are producing a video methods collection focused on Preparation of Acute Hippocampal Slices led by Dr. Leroy at Columbia University.</p>
<p dir="ltr">This online collection will serve as a comprehensive resource in the field for years to come and will set the standard for experimental research in the community. </p>
<p dir="ltr">If you are interested in participating in building this resource by submitting an abstract, please let me know. </p>
<p dir="ltr">Best Regards,<br>
Ronald Myers, Ph.D.</p>
</td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
</tbody>
</table>
<!-- // END HEADER --></td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; border-top-color: #30303c; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody><!-- BEGIN COLUMNS // -->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
</tbody>
</table>
<!-- // END COLUMNS --></td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
<tr style="">
<td align="left" class="footerContent" pardot-data="link-color:#FFFFFF;" pardot-region="footer_content01" style="color: rgb(255, 255, 255); font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: left; padding: 0px 20px 20px; background: rgb(22, 104, 224);" valign="top">
<table border="0" cellpadding="1" cellspacing="1" class="pd-table" style="width: 100%;">
<tbody>
<tr>
<td style="width: 19px;"><br>
<span style="font-size:14px;"><img alt="" border="0" height="35" src="http://storage.pardot.com/283112/3017/w_logo.png" style="width: 70px; height: 35px; border-width: 0px; border-style: solid;" width="70"></span></td>
<td style="width: 287px;">
<div style="text-align: center;"><br>
<span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#FFFFFF;">© 2019. All rights reserved.<br>
1 Alewife Center, Cambridge, MA 02140<br>
</span></span></span><br>
</div>
</td>
<td style="width: 59px;">
<div style="text-align: right;"><br>
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:14px;">www.jove.com</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td align="left" class="footerContent original-only" pardot-data="link-color:#FFFFFF;" pardot-region="footer_content02" style="color: rgb(80, 80, 80); font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: left; padding: 0px 20px 20px; background: rgb(250, 250, 250);" valign="top">
<div style="text-align: center;"><br>
<span style="font-size:12px;"><span style="font-family: arial,helvetica,sans-serif;">Unsubscribe</span><br>
Policies</span></div>
</td>
</tr>
</tbody>
</table>
<!-- // END FOOTER --></td>
</tr>
</tbody>
</table>
<!-- // END TEMPLATE --></td>
</tr>
</tbody>
</table>
<br>
<!--
This email was originally designed by the wonderful folks at MailChimp and remixed by Pardot.
It is licensed under CC BY-SA 3.0
-->
</body>
</html>
It's in 3 different places, and you have to remove them all:
<body bgcolor="#FAFAFA" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; background-color: #FAFAFA; margin: 0; padding: 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FAFAFA; border-collapse: collapse !important; height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" width="100%">
Remove bgcolor="#FAFAFA" and both occurrences of background-color: #FAFAFA; from there. Then it will be like this:
#outlook a {
padding: 0;
}
.body{
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
}
/* hide unsubscribe from forwards*/
blockquote .original-only, .WordSection1 .original-only {
display: none !important;
}
#media only screen and (max-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
#bodyCell{padding:10px !important;}
#templateContainer{
max-width:600px !important;
width:100% !important;
}
h1{
font-size:24px !important;
line-height:100% !important;
}
h2{
font-size:20px !important;
line-height:100% !important;
}
h3{
font-size:18px !important;
line-height:100% !important;
}
h4{
font-size:16px !important;
line-height:100% !important;
}
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
#headerImage{
height:auto !important;
max-width:600px !important;
width:100% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
}
.templateColumnContainer{display:block !important; width:100% !important;}
.columnImage{
height:auto !important;
max-width:260px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.footerContent{
font-size:14px !important;
line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="{{Subject}}" />
<title>{{Subject}}</title>
</head>
<body style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; margin: 0; padding: 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" width="100%">
<tbody>
<tr>
<td align="center" id="bodyCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important; border-top-width: 4px; border-top-color: #dddddd; border-top-style: solid; margin: 0; padding: 20px;" valign="top"><!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; width: 600px; border: 0px solid #dddddd;">
<tbody>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templatePreheader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
<tr style="">
<td align="left" class="preheaderContent" pardot-region="preheader_content00" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #808080; font-family: Helvetica; font-size: 10px; line-height: 12.5px; text-align: left; padding: 10px 20px;" valign="top"><img alt="" border="0" height="40" src="http://info2.jove.com/l/283112/2017-04-18/r7gz/283112/11321/logo.png" style="width: 79px; height: 40px; border-width: 0px; border-style: solid;" width="79"></td>
<td align="left" class="preheaderContent" pardot-region="preheader_content01" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #808080; font-family: Helvetica; font-size: 10px; line-height: 12.5px; text-align: left; padding: 10px 20px 10px 0;" valign="top" width="180">
<div style="text-align: right;"><br>
View this email in your browser.</div>
</td>
</tr>
</tbody>
</table>
<!-- // END PREHEADER --></td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
</tbody>
</table>
<!-- // END HEADER --></td>
</tr>
<tr pardot-repeatable="" style="">
<td align="left" class="bodyContent" pardot-data="link-color:#00d369;" pardot-region="body_content00" style="color: rgb(3, 3, 3); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; text-align: left; padding: 20px; background: rgb(255, 255, 255);" valign="top">
<p>Dear Dr. {{Recipient.LastName}},</p>
<p dir="ltr">We are producing a video methods collection focused on Preparation of Acute Hippocampal Slices led by Dr. Leroy at Columbia University.</p>
<p dir="ltr">This online collection will serve as a comprehensive resource in the field for years to come and will set the standard for experimental research in the community. </p>
<p dir="ltr">If you are interested in participating in building this resource by submitting an abstract, please let me know. </p>
<p dir="ltr">Best Regards,<br>
Ronald Myers, Ph.D.</p>
</td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
</tbody>
</table>
<!-- // END HEADER --></td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; border-top-color: #30303c; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody><!-- BEGIN COLUMNS // -->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
</tbody>
</table>
<!-- // END COLUMNS --></td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
<tbody>
<tr style="">
<td align="left" class="footerContent" pardot-data="link-color:#FFFFFF;" pardot-region="footer_content01" style="color: rgb(255, 255, 255); font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: left; padding: 0px 20px 20px; background: rgb(22, 104, 224);" valign="top">
<table border="0" cellpadding="1" cellspacing="1" class="pd-table" style="width: 100%;">
<tbody>
<tr>
<td style="width: 19px;"><br>
<span style="font-size:14px;"><img alt="" border="0" height="35" src="http://storage.pardot.com/283112/3017/w_logo.png" style="width: 70px; height: 35px; border-width: 0px; border-style: solid;" width="70"></span></td>
<td style="width: 287px;">
<div style="text-align: center;"><br>
<span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#FFFFFF;">© 2019. All rights reserved.<br>
1 Alewife Center, Cambridge, MA 02140<br>
</span></span></span><br>
</div>
</td>
<td style="width: 59px;">
<div style="text-align: right;"><br>
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:14px;">www.jove.com</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td align="left" class="footerContent original-only" pardot-data="link-color:#FFFFFF;" pardot-region="footer_content02" style="color: rgb(80, 80, 80); font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: left; padding: 0px 20px 20px; background: rgb(250, 250, 250);" valign="top">
<div style="text-align: center;"><br>
<span style="font-size:12px;"><span style="font-family: arial,helvetica,sans-serif;">Unsubscribe</span><br>
Policies</span></div>
</td>
</tr>
</tbody>
</table>
<!-- // END FOOTER --></td>
</tr>
</tbody>
</table>
<!-- // END TEMPLATE --></td>
</tr>
</tbody>
</table>
<br>
<!--
This email was originally designed by the wonderful folks at MailChimp and remixed by Pardot.
It is licensed under CC BY-SA 3.0
-->
</body>
</html>
I've used an html email template and modified it but the email is displaying with a large white margin at the top. How to I reduce this? I'm using android mail client to receive mail and, between the head and top of the page (subject bar), there's too much margin (white space. I'd like to bring the whole thing up to the top of the page
/* -------------------------
------------
INLINED WITH
htmlemail.io/inline
----------------------------
--------- */
/* -------------------------
------------
RESPONSIVE AND MOBILE
FRIENDLY STYLES
----------------------------
--------- */
#media only screen and (max- width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img- responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------
------------
PRESERVE THESE STYLES IN THE
HEAD
----------------------------
--------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
<body class="" style="background-color:
#f6f6f6; font-family: sans-
serif; -webkit-font.
smoothing: antialiased;
font-size: 14px; line-
height: 1.4; margin: 0;
padding: 0; -ms-text-size-
adjust: 100%; -webkit-text-s
size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background.
color: #f6f6f6;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
</td>
<td class="container" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top;
display: block; Margin: 0
auto; max-width: 580px;
padding: 10px; width:
580px;">
<div class="content" style="box-sizing: border.
box; display: block;
Margin: 0 auto; max-width:
580px; padding: 10px;">
<!-- START CENTERED WHITE
CONTAINER -->
<span class="preheader" style="color: transparent;
display: none; height: 0;
max-height: 0; max-width: 0;
opacity: 0; overflow:
hidden; mso-hide: all;
visibility: hidden; width:
0;">Post an ad today and
start selling your unwanted
items.</span>
<table class="main" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background:
#ffffff; border-radius:
3px;">
<!-- START MAIN CONTENT AREA
-->
<tr>
<td class="wrapper" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top; box-
sizing: border-box; padding:
20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
<p style="font-family: sans-
serif; font-size: 14px;
font-weight: normal; margin:
0; Margin-bottom: 15px;">.
</p>
<p style="font-family: sans-
serif; font-size: 14px;
font-
weight: normal; margin: 0;
Margin-bottom: 15px;">.
<center><img src="http://adsler.co.uk/wp-
content/uploads/2019/
07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0;
outline:none; text.
decoration:none;
display:block;"><br><br>.
</center>
Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
<center>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
</tr>
</tbody>
</center>
</table>
</td>
</tr>
</tbody>
</table>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
</center>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
<br>
.
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>
Example of changes..
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-
family: sans-serif; font-size:
14px; vertical-align: top; box-
sizing: border-box; padding: 0
20px;">
<table border="0" cellpadding="0"
cellspacing="0" style="border.
collapse:
separate; mso-table-lspace: 0pt;
mso-table-rspace: 0pt; width:
100%;">
<tr>
<td style="font-family: sans-serif;
font-size: 14px; vertical-align:
top;">
<center><img
src="http://adsler.co.uk/wp--
content/uploads/2019/07/Ph
oto_1563667417091.png" alt="Useful
alt text" width="300" height="60"
border="0" style="border:0;
outline:none; text-decoration:none;
display:block;"><br><br></center>
Hey there and welcome to Adsler.
Just in case you didn't know, you
can also post ads for property,
jobs, items wanted or for sale,
motors, mobile phones and much
more.
<table border="0" cellpadding="0"
cellspacing="0" class="btn bt
You had a couple empty <p> tags above your header image and the surrounding <td> had a 20px padding.
/* -------------------------
------------
INLINED WITH
htmlemail.io/inline
----------------------------
--------- */
/* -------------------------
------------
RESPONSIVE AND MOBILE
FRIENDLY STYLES
----------------------------
--------- */
#media only screen and (max- width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img- responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------
------------
PRESERVE THESE STYLES IN THE
HEAD
----------------------------
--------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
<body class="" style="background-color:
#f6f6f6; font-family: sans-
serif; -webkit-font.
smoothing: antialiased;
font-size: 14px; line-
height: 1.4; margin: 0;
padding: 0; -ms-text-size-
adjust: 100%; -webkit-text-s
size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background.
color: #f6f6f6;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
</td>
<td class="container" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top;
display: block; Margin: 0
auto; max-width: 580px;
padding: 10px; width:
580px;">
<div class="content" style="box-sizing: border.
box; display: block;
Margin: 0 auto; max-width:
580px; padding: 10px;">
<!-- START CENTERED WHITE
CONTAINER -->
<span class="preheader" style="color: transparent;
display: none; height: 0;
max-height: 0; max-width: 0;
opacity: 0; overflow:
hidden; mso-hide: all;
visibility: hidden; width:
0;">Post an ad today and
start selling your unwanted
items.</span>
<table class="main" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background:
#ffffff; border-radius:
3px;">
<!-- START MAIN CONTENT AREA
-->
<tr>
<td class="wrapper" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top; box-
sizing: border-box; padding:
0 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
<center><img src="http://adsler.co.uk/wp-
content/uploads/2019/
07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0;
outline:none; text.
decoration:none;
display:block;"><br><br>.
</center>
<p style="font-family: sans-
serif; font-size: 14px;
font-
weight: normal; margin: 0;
Margin-bottom: 15px;">Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
<center>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
</tr>
</tbody>
</center>
</table>
</td>
</tr>
</tbody>
</table>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
</center>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
<br>
.
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>
When I preview this the content table explodes outside of 700 pixels. I'm sure it is something simple like a missing tag but I checked for an hour and made some changes but still the problem persists. The Dreamweaver program didn't show any errors either.
Thanks in advance for any help.
After using the inline tool, this is the new code. The same problem still exists. It looks like a padding issue but I'm not sure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ezTaxReturn.com Newsletter</title>
<!-- Targeting Windows Mobile --><!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]--><!-- ***********************************************
****************************************************
END MOBILE TARGETING
****************************************************
************************************************ --><!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]-->
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; width: 100% !important">
<style type="text/css">
body {
width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass {
line-height: 100%;
}
#backgroundTable {
margin: 0; padding: 0; width: 100% !important; line-height: 100% !important;
}
h1 a:active {
color: red !important;
}
h2 a:active {
color: red !important;
}
h3 a:active {
color: red !important;
}
h4 a:active {
color: red !important;
}
h5 a:active {
color: red !important;
}
h6 a:active {
color: red !important;
}
h1 a:visited {
color: purple !important;
}
h2 a:visited {
color: purple !important;
}
h3 a:visited {
color: purple !important;
}
h4 a:visited {
color: purple !important;
}
h5 a:visited {
color: purple !important;
}
h6 a:visited {
color: purple !important;
}
#media only screen and (max-device-width: 480px) {
a[href^="tel"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
a[href^="sms"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
.mobile_link a[href^="tel"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
.mobile_link a[href^="sms"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
#navigation {
display: none;
}
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
a[href^="sms"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
.mobile_link a[href^="tel"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
.mobile_link a[href^="sms"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
}
</style>
<table class="newsletter-table" id="backgroundTable" style="background: #ebebeb; border-collapse: collapse; line-height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb"><tbody><tr><td valign="top" style="border-collapse: collapse">
<!-- PRE -->
<table class="pre" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt"><tbody><tr>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 10px; line-height: 14px; padding: 20px 0 0" align="center">The September 2015 customer newsletter is sent as a courtesy from ezTaxReturn.com.<br>View Online in Browser. If you prefer not to receive email from us, click here to unsubscribe.<br><br>
</td>
</tr></tbody></table>
<!-- END PRE --><!-- HEADER START --><table class="hero" style="border-collapse: collapse; font-family: Arial,Helvetica; font-size: 12px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 700px" border="0" cellpadding="0" cellspacing="0" align="center"><tbody align="center">
<tr>
<td data-description="Orange Bar" style="background: #fb7016; border-collapse: collapse; line-height: 0px" colspan="2" align="center" bgcolor="#fb7016"><img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/orange-5x5.gif" height="5" width="5" alt="line"></td>
</tr>
<tr>
<td style="background: #ffffff; border-collapse: collapse" width="350" bgcolor="#ffffff"><img alt="ezTaxReturn.com - The fastest way to get the biggest fund." src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/ezTaxReturnLogo.jpg" width="100%" style="border: none"></td>
<td style="background: #ffffff; border-collapse: collapse" bgcolor="#ffffff">
<font style="color: #fb7016">SEPTEMBER NEWSLETTER</font>
</td>
</tr>
</tbody></table>
<table id="Table_01" width="700" height="367" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td colspan="2" style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_012.jpg" width="700" height="280" border="0" alt="Still haven't filed your taxes? No problem." style="border: none"></a>
</td>
</tr>
<tr>
<td style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/offers_plan.html" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_022.jpg" width="351" height="88" border="0" alt="Save time and money. Pre-register for next year." style="border: none"></a>
</td>
<td style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/post_comments.html" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_032.jpg" width="350" height="88" border="0" alt="We care. Share your filing experience." style="border: none"></a>
</td>
</tr>
</table>
</td></tr></tbody></table>
<!-- HERO END --><!-- CONTENT --><table cellpadding="0" cellspacing="0" border="0" align="center" style="background: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="700px" bgcolor="#ffffff">
<tr>
<td valign="top" style="border-collapse: collapse">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="385">
<tr><td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 20px 0px 0px 40px" valign="top">TAX TALK, NEWS & INSIGHTS</td></tr>
<tr>
<td valign="top" style="border-collapse: collapse; color: #000; font-family: Arial, Helvetica; font-size: 12px; padding: 25px 20px 20px 40px">
Review your taxes now to prevent<br>a surprise next spring<br>
Don’t let tax time fool you. Some people are overjoyed<br>to receive a big refund at tax time...
[READ MORE]<br><br>Furthering your education<br>has tax benefits<br>
Enjoy the rest of your summer while you can, school will<br>be back in session before you know it... [READ MORE]
<br><br>6 tips to exercise safely in the summer heat<br>
Summer’s the perfect time to get off the couch and<br>engage in outdoor activities... [READ MORE]
<br><br>Easy ways to keep your home safe<br>while you travel<br>
Imagine returning from the vacation of a lifetime to find<br>your home ransacked... [READ MORE]
<br><br>Did you file a tax extension?<br>The clock is ticking...<br>
April 15th has come and gone but the tax season hasn’t ended for nearly 13 million people... [READ MORE]
<br>
</td>
</tr>
<tr><td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding-left: 40px" valign="top">TESTIMONIALS</td></tr>
<tr>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding: 15px 0px 0px 40px">
<b>Therese P., AL</b>
</td>
</tr>
<tr>
<td colspan="2" style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding-left: 40px">
I just used your wonderful site to file. Thank you, thank<br>you! Highly recommend you to all!!! I will definitely be<br>back next year! I'm so glad I found you. This was my<br>first time doing my own taxes. Thanks again for your<br>quick and helpful responses.
<br>[READ MORE TESTIMONIALS]
<p style="margin: 1em 0"></p>
<p style="margin: 1em 0"></p>
<p style="margin: 1em 0"></p>
</td>
</tr>
<tr>
<td style="border-collapse: collapse; padding: 2px 40px 20px 0px">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/like-facebook.gif" alt="Follow us on Facebook" align="right" border="0" style="border: none">
</td>
</tr>
</table>
</td>
<td valign="top" style="border-collapse: collapse">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; border-left-color: #ccc; border-left-style: solid; border-left-width: 0px; font-family: Arial, Helvetica; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="300">
<tr>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 20px 0px 0px" valign="top">
EZ LAUGHS
</td>
</tr>
<tr>
<td style="border-collapse: collapse">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/jan2014_cartoon.gif" alt="Tax Humor" title="Tax Humor" width="290" height="288" border="0" style="padding: 40px 0px 54px">
</td>
</tr>
</table>
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 0px 20px 0px 0px; valign: top; width: 130px">
TAX TOOLS
</td>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 0px 20px 0px 0px; valign: top">
BLOG
</td>
</tr>
<tr>
<td style="border-collapse: collapse; font-size: 12px; padding-top: 20px">
Start a Return<br>Download a Return<br>What's my ezStatus<br>Where's my Refund?
</td>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding-top: 20px">
Read more<br>
from our blog.<br><br>blog.eztaxreturn.com<br>
</td>
</tr>
<tr><td colspan="2" style="border-collapse: collapse; padding: 93px 0px 0px">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/follow-twitter.gif" alt="Follow us on Twitter" border="0" align="left" style="border: none">
</td></tr>
</table>
</td>
</tr>
<!-- END CONTENT --><!-- FOOTER --><tr>
<td style="border-collapse: collapse">
<table class="post" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 11px; line-height: 16px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="700"><tr>
<td style="border-collapse: collapse; color: #666666; padding: 25px 0" align="center">This email was sent to {{{email_address}}}.<br>Click Here To Unsubscribe<br> Copyright 2015 ezTaxReturn.com, LLC | 100 Ring Road West | Garden City, NY 11530<br> All rights reserved.</td>
</tr></table>
</td>
</tr>
<!-- END FOOTER --><!-- End of wrapper table -->
</table>
</body>
</html>
There were multiple problems with table layout and, generally, nesting. Also, "px" in HTML width attributes. Here's a patched up version which at least shows up fine in Chrome. It's a good starting point to further clean up the code. I am not going to render-test it further because this is a site for questions and the question was why is the code "exploding". Well, the code below doesn't "explode" anymore (at least in latest Chrome):
JSFiddle
CSS in your <head> will often be ignored by email clients that render HTML emails.
The safe bet is to apply CSS using style= attributes on each tag. Fortunately, you can take what you have now and use a free online service to create your final HTML. There are several other options to apply the CSS to each HTML element.