I'm using Zurb Ink to create atemplate for the first time; it's great, but I cannot get my head around a certain problem.
Everything works fine when I view the HTML in my browser, but I'm unfortunately required to send my email through a sending platform which takes the liberty of adjusting the code I've written.
The problem I'm having is with image size. For some reason, an image I'm using, which is 580px wide, sizes itself to 576px when sent through the email platform. I have looked through the code repeatedly and checked around online but I can't find anything, so an help is VERY much appreciated.
<!--header row-->
<table class="row header-bar" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; background: #4480ba; padding: 0px;" bgcolor="#4480ba">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="nine sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 75%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 80%; float: left; clear: both; display: block; padding-left: 10px; padding-right: 10px; margin-left: 5px; margin-right: 5px;" class="text-pad alumni-logo" src="" alt="" width="237" height="80" align="left" />
</td>
<td class="three sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 25%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; margin: 0 auto;" class="center" src="http://www.jampaper.com/userFiles/productImages/tn_02561_Orange_6_1_2_x_6_1_2_Square_Envelopes.jpg" alt="" width="80" height="80" align="none" />
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/header row-->
<!--big image row-->
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last intro-image" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; padding-top: 0 !important; margin: 0 auto;" class="center intro-image" src="http://www.nagelphotography.com/img/s2/v4/p176518365-3.jpg" alt="" width="580" align="none" />
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/big image row-->
I understand this might be a bit of a long shot but I really cannot figure out why this image is not 580px when the screen is wide enough to support it. For reference, at smaller sizes the problem persists, but the difference is a smaller number of pixels.
If anyone comes across this problem in the future - you may be interested to know that the reason the image was out of line was the expander cell below was taking up space, due to the fact that the character had been added by the email platform I was using. Normally in Ink expanders have no size at all.
Related
This is a confirmation email from a MailJet subscription widget. Problem is that the body goes too wide in Outlook but header is responsive and looks correct. I've tried a ton of things like fixed width, break word, etc to try and contain the body. I'm sure it is simple but I guess this is part of the learning journey! Any help is much appreciated!
<html><body><div class="mj-w-double-optin-email" style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
<table class="mockup-content paint-area mj-opt-in" style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr class="mj-opt-in-head" style="height: 20px; line-height: 20px;"><td> </td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; font-family: Ubuntu, Helvetica; border-collapse: collapse;background-color: #e7eaef;">
<tbody><tr style="height: 60px; line-height: 60px; width: 100%; text-align: center;"><td><div class="mj-opt-in-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b class="medium-b"><font size="6">Joy Kate Designs</font></b></div></td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; background-color: white; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr style="text-align: center; padding: 0 0 20px 0;">
<td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle;">
<span class="mj-opt-in-subscribe-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b class="medium-b">Please Confirm Your Subscription</b>
</span>
</td>
</tr>
<tr><td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-display-text paint-area paint-area--text Medium Medium-rich" style="text-align: left; color: grey; margin-bottom: 25px; line-height: normal;">Thank you very much for your subscription to our newsletter. To finalise it, please click on the button below. If you didn't ask to subscribe or you have changed your mind, simply ignore this email.</div></td></tr>
<tr>
<td style="padding-bottom: 15px; text-align: center;">
<data id="start-link"></data>
<div class="mj-opt-in-button mj-w-btn mockup-content paint-area" style="font-family: Ubuntu, Helvetica; font-size: 13px; padding: 0px 25px; color: white; background-color: rgb(240, 104, 104); text-align: center; display: inline-block; border-radius: 3px;">
<div style="display: table; height: 45px; width: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="mj-opt-in-button-content paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b class="medium-b">CLICK HERE TO SUBSCRIBE</b></div>
</div>
</div>
</div>
<data id="end-link"></data>
</td>
</tr>
<tr><td style="text-align: left; height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-footer paint-area paint-area--text Medium Medium-rich" style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i class="medium-i" style="word-break: break all; max-width: 600px;">If you are having troubles with the button, copy/paste the following URL in your browser: [URL]</i></div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-top paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;">Thanks,</div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-bottom paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b class="medium-b">Joy Kate Designs</b></div></td></tr>
</tbody></table>
</div></body></html>
The main problem here is that The Outlooks on Windows don’t support max-width (see Can I email for details). An easy solution is to add what’s usually referred to as a ghost table: a <table> within conditional comments specifically for Outlook.
Add the following right after the opening of your <body>:
<!--[if mso]>
<table cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" style="width:600px;"><tr><td>
<![endif]-->
And add the following right before the closing of your </body>:
<!--[if mso]>
</td></tr></table>
<![endif]-->
It also looks like the generated URL at the end of your email (seen in your screenshot but not in your code) is forcing your layout to expand. To prevent this, you can force the text to break on multiple lines by adding word-break:break-all; word-wrap:break-word; in the style of the maching <td>.
Here’s a full code example fixing these two issues (tested on Email on Acid):
<html><body>
<!--[if mso]>
<table cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" style="width:600px;"><tr><td>
<![endif]-->
<div class="mj-w-double-optin-email" style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
<table class="mockup-content paint-area mj-opt-in" style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr class="mj-opt-in-head" style="height: 20px; line-height: 20px;"><td> </td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; font-family: Ubuntu, Helvetica; border-collapse: collapse;background-color: #e7eaef;">
<tbody><tr style="height: 60px; line-height: 60px; width: 100%; text-align: center;"><td><div class="mj-opt-in-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b class="medium-b"><font size="6">Joy Kate Designs</font></b></div></td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; background-color: white; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr style="text-align: center; padding: 0 0 20px 0;">
<td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle;">
<span class="mj-opt-in-subscribe-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b class="medium-b">Please Confirm Your Subscription</b>
</span>
</td>
</tr>
<tr><td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-display-text paint-area paint-area--text Medium Medium-rich" style="text-align: left; color: grey; margin-bottom: 25px; line-height: normal;">Thank you very much for your subscription to our newsletter. To finalise it, please click on the button below. If you didn't ask to subscribe or you have changed your mind, simply ignore this email.</div></td></tr>
<tr>
<td style="padding-bottom: 15px; text-align: center;">
<data id="start-link"></data>
<div class="mj-opt-in-button mj-w-btn mockup-content paint-area" style="font-family: Ubuntu, Helvetica; font-size: 13px; padding: 0px 25px; color: white; background-color: rgb(240, 104, 104); text-align: center; display: inline-block; border-radius: 3px;">
<div style="display: table; height: 45px; width: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="mj-opt-in-button-content paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b class="medium-b">CLICK HERE TO SUBSCRIBE</b></div>
</div>
</div>
</div>
<data id="end-link"></data>
</td>
</tr>
<tr><td style="text-align: left; height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px; word-break:break-all; word-wrap:break-word;"><div class="mj-opt-in-footer paint-area paint-area--text Medium Medium-rich" style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i class="medium-i" style="word-break: break all; max-width: 600px;">If you are having troubles with the button, copy/paste the following URL in your browser: [URL]</i></div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-top paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;">Thanks,</div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-bottom paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b class="medium-b">Joy Kate Designs</b></div></td></tr>
</tbody></table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]--></body></html>
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'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>
So made a newsletter for a client, and just 1 slight little bug i have now on Outlook 2007,2010,2013,2016 assuming its cause these use Word as the rendering engine.
Basically i have a 2x2 grid each item being 50% so all sitting nice and snug but on outlook it looks like its either adding whitespace below the images or adding more padding to my text boxes (see screenshot)
Here is my HTML for that section:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="50%" background="#8f5470" bgcolor="#8f5470" style="padding-left:45px; padding-right:45px; padding-top:20px; padding-bottom:20px;">
<h4 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">we take care of every detail</h4>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Everything from design and planning through to manufacturing and installation, and where required assisting you to appoint a builder for the required preparatory works.</p>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">We are dedicated to making it as easy as possible for you.</p>
</td>
<td width="50%" class="show-for-large"><img src="http://aproposconservatories.co.uk/wp-content/themes/apropos_new/images/newsletter/detail-img.jpg" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="50%" class="show-for-large"><img src="http://aproposconservatories.co.uk/wp-content/themes/apropos_new/images/newsletter/benefits-img.jpg" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"></td>
<td width="50%" background="#0599a8" bgcolor="#0599a8" style=" padding-left:45px; padding-right:45px; padding-top:20px; padding-bottom:20px;">
<h4 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">we can offer benefits to our clients</h4>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">In conjunction with Barclays we are able to offer a number of financial solutions, helping our customers stay in control of their cash flow.</p>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">As members of the IBGCo we offer consumer protection at point of sale and throughout the ten year guarantee period. Providing total peace of mind.</p>
</td>
</tr>
</tbody>
</table>
Any help would be appreciated thanks in advance.
I have added mso-padding-alt: 0px 45px; to parent td of the text.
Here is the working fiddle.
https://jsfiddle.net/6LgcnLka/
I have attached the screenshot of the ouput in outlook 2013
Excuse my newbie coding because it's a Frankenstein mix of hundreds of email layouts, but can someone tell me why my table layout is not displaying the columned tables side-by-side?
It's the two td elements with the class name container-small at 50% width that won't position side-by-side. I'm not using float or divs.
Is it because they're separate tables when they should be part of the same td? Please feel free to make other amendments/suggestions so I can improve my layout. The left column must be 283px exactly, but the right column can be 100% fluid. That's really the only requirement.
<!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"/>
<style type="text/css">
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
the problem is here:
.container-small {
display: block !important;
width: 100% !important;
}
just remove this two properties above.
Snippet below:
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
/* REMOVE HERE
.container-small {
display: block !important;
width: 100% !important;
}
*/
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
</center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>