My content looks exactly how I want it when testing in browser, but after running it through email the Header is below the banner instead of on it - like how it is in Browser.
<tr>
<td style="background-color: #FBFBFB;">
<div style="position: relative; text-align: center; color: white;">
<img src="iphonebannerv3.png" width="600" height="" alt="Nielsen Header Banner" border="0" style="width: 100%; max-width: 600px; height: auto; background: #FBFBFB; font-family: open sans, sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto;" class="g-img">
<h1 style="margin: 0 0 0px 0; font-family: Open sans, sans-serif; font-size: 28px; text-align:center; line-height: 30px; color: #FFFFFF; font-weight: bold; position: absolute; top: 45%; left: 8%;">YOU'RE MISSING OUT<br> ON VOUCHERS</h1>
</div>
</td>
</tr>
Coding HTML email templates can be tricky. Instead of absolute positioning the H1, try setting everything fixed with tables. For example, In your TD I would start with a fresh table. For example:
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FBFBFB">
<tr>
<td align="center">
<table width="600px" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td>
<img src="https://placehold.it/600x150" width="600" height="150" alt="Nielsen Header Banner" border="0" style="display: block; width: 600px; height: 150px;" class="g-img">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background: #00aeef; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td style="font-family: Arial, Verdana, sans-serif; font-size: 28px; text-align: center; line-height: 30px; color: #FFFFFF; font-weight: bold;"> YOU'RE MISSING OUT<br> ON VOUCHERS</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
You can use a Style tag in your CSS to keep your styles organised, and use a tool like https://inlinestyler.torchbox.com/ to move all your css inline before you finish the template. Also,
Not everyone has Open Sans installed in their client,
Define width and height on your images.
An image does not require all the font CSS styles.
Set everything with tables for the best cross-mailclient templates.
Good luck!
Related
I have developed several responsive emails with two-column and three-column layouts. This time, I have tried to do the same but I've encountered an issue. The columns push each other until the left one pushes the right one below...I'd like for both of them to constraint each other.
Broken
Correct way
<tr>
<td align="center" width="100%" style="max-width: 600px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" border="0" margin="0" role="presentation" bgcolor="#f9f9f9" style="width: 100%; max-width: 600px; padding: 0 20px; background-color: #f9f9f9;">
<tr>
<td>
<!--LEFT COLUMN-->
<table align="left" valign="top" class="mobile-aep-couple" width="280" border="0" margin="0" cellspacing="0" cellpadding="0" role="presentation" style="margin: 0 auto; padding: 0; vertical-align: top; max-width: 100%;">
<tr>
<td width="100%" style="font-family: 'Raleway', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 20px; text-align: center;">
<img src="testimage" alt="" width="100%" style="width: 100%; max-width: 100%; height: auto; padding: 3px 0 32px 2px;">
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table align="right" valign="top" class="mobile-aep-couple" width="320" border="0" margin="0" cellspacing="0" cellpadding="0" role="presentation" style="margin: 0 auto; padding: 0; vertical-align: top; max-width: 100%;">
<tr>
<td width="100%" class="right-col-header" style="font-family: 'Raleway', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; line-height: 22px; font-weight: bold; padding: 32px 20px 15px 18px; color: #202f60;">
The Annual Enrollment Period ends December 7th
</td>
</tr>
<tr>
<td width="100%" class="right-col-text" style="font-family: 'Raleway', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 18px; padding: 0px 20px 43px 18px;">
We have the free resources to compare available plans in your area and answer all your questions. We'll make it easy to pick up where you left off and make the Medicare plan selection that works for you.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
I'm creating an email signature using CodeTwo Email signature from Office 365. It's nearly done, but I keep having issues with a horizontal line that's in the signature. I've tried multiple variations of CSS style elements to get it to work everywhere, but as of now, it shows up on mobile devices, but not desktop devices (it shows up as like an outline of the line on desktop). For the longest time, it worked on desktop but not mobile, but then when I changed something it flipped. I'm using an hr element for the line. Here's a segment of the code:
<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64"
vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px"
vAlign=top>{Title}</TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<HR
style="BORDER-TOP: 0px; HEIGHT: 3px; BORDER-RIGHT: 0px; WIDTH: 80%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64"
align=left>
</TD></TR>
Does anyone know what combination of stylings I would need in my hr tag? Thanks
Instead of the <hr> try using a <div> with a border-bottom of the required size:
<div style="border-bottom: 3px solid #213e64;"></div>
Example
<table style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<tbody>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64" vAlign=top>
<strong>{First name} {Last name}</strong>
</td>
</tr>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px" vAlign=top>{Title}</td>
</tr>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<div style="border-bottom: 3px solid #213e64;"></div>
</td>
</tr>
</tbody>
</table>
You forgot to close the HR tag and have some styles that are not needed, try this
<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64"
vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px"
vAlign=top>{Title}</TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<HR
style="HEIGHT: 3px; WIDTH: 80%; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64"
align=left />
</TD></TR>
</TBODY>
</TABLE>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Social Superstore - Email template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
#media screen and (max-width: 525px) {
table {
width: 100%;
}
.header-padding {
padding-left: 10px;
padding-right: 10px;
}
.logo {
height: 50px;
width: auto;
}
.mobile-hide {
display: none !important;
}
.mobile-copy {
text-align: center !important;
}
.mobile-center-btn {
text-align: center !important;
}
.icon-image-tall {
width: auto !important;
height: 200px;
}
.icon-image-long {
width: 200px;
height: auto !important;
}
.icons_three_padding {
padding-bottom: 40px;
}
.iphone_icon_mobile {
width: 120px !important;
}
.money_icon_mobile {
width: 120px !important;
}
.share_icon_mobile {
width: 120px !important;
}
.icons_conatiners_height {
height: auto !important;
}
.main-image-mobile {
width: 90% !important;
}
}
</style>
</head>
<body>
<!-- hidden preheader text -->
<div style="display: none; font-size: 1px; color: #f2f2f2; line-height: 1px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Hi #FIRSTNAME#, You are officially a #[COMPANY]. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Social Superstars too.
</div>
<!-- /hidden preheader text -->
<!--container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#f2f2f2" style="background-color: #f2f2f2;">
<tr>
<td>
<!--header container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #dadada;">
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;" class="header-padding">
<!--header-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#ffffff" style="background-color: #ffffff; margin-left: auto; margin-right: auto;">
<tr>
<td>
<img src="http://placehold.it/64x64" alt="" style="font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #E72C7B; font-size: 24px;" width="64" class="logo">
</td>
</table>
</center>
<!--/header-->
</td>
</tr>
</table>
<!--/header container-->
<!--hero container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--hero copy-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;">
<tr>
<td style="font-size: 36px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #6a6a6a;" class="mobile-copy">
Hi #FIRSTNAME#,
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; color: #6a6a6a;" class="mobile-copy">
You are officially a <span style="font-weight: bold">#[COMPANY]</span>. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Superstars too.
</td>
</tr>
</table>
</center>
<!--/hero copy-->
</td>
</tr>
</table>
<!--/hero container-->
<!--fill it up and launch container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#6a6a6a" style="background-color: #6a6a6a;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--fill it up and launch-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;" align="center">
<tr>
<td style="font-size: 48px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #ffffff; text-align: center;" class="mobile-copy">More followers,<br>more money</td>
</tr>
<tr>
<td style="padding-bottom: 40px;"><img src="https://s3-eu-west-1.amazonaws.com/socialsuperstore-assets/emails/find-followers.png" alt="" style="width: 360px;" width="360" class="main-image-mobile">
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; padding-bottom: 40px; color: #ffffff; text-align: center;" class="mobile-copy">Don't be shy… share share share! <br>Remember... Stay Social. Stay Super. </td>
</tr>
<tr>
<td class="mobile-center-btn">Share now →</td>
</td>
</tr>
</table>
</center>
<!--/fill it up and launch-->
</td>
</tr>
</table>
<!--/fill it up and launch container-->
<!--footer container-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--footer-->
<center>
<table width="600" cellpadding="0" cellspacing="0" align="center" style="text-align: center;">
<tr>
<td style="font-size: 18px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #999999; padding-bottom: 20px">Thanks,<br />
The [COMPANY]team
</td>
</tr>
<tr>
<td style="font-size: 24px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #282828; font-weight: bold;">COPY GOES HERE</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
</td>
</tr>
</table>
</center>
<!--/footer-->
</td>
</tr>
</table>
<!--/footer container-->
<!-- Unsubscribe container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#282828" align="center" style="padding: 20px 0px; background-color: #282828;">
<!-- unsubscribe -->
<center>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
<tr>
<td align="center" style="font-size: 10px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color:#ffffff;">
<span class="appleFooter" style="color:#999;">
[company]
</span>
<br><a class="original-only" style="color: #E72C7B; text-decoration: none;" href="http://$UNSUB$">Unsubscribe</a>
</td>
</tr>
</table>
</center>
<!--/unsubscribe-->
</td>
</tr>
</table>
<!--/Unsubscribe container-->
</td>
</tr>
</table>
<!--/container-->
</body>
</html>
I've created some responsive HTML emails and have noticed on a couple of them, they show a white space (approx 20-30px in width) on the right. it only appears on iPads? I've attached a screenshot. Any ideas on how to get rid of it? I've apply 100% widths and 0 padding/margin and overflow-x: hidden to body and html tags but didn't work. Is it something to do with the amount of content in the email? The other emails without this issue have a lot more content (ie. they are taller with more sections).
http://imgur.com/kBgYmLm
This one was a tough nut to crack. To fix it, I wrote a media query that targets only iPads, and specifies a minimum width for the body. In my testing, this fixes the issue.
https://www.emailonacid.com/app/acidtest/display/summary/H51ptRsq1CKfk3qClFhulAJfOoa7NeZ5uplotor0fc9kD/shared
#media screen and (device-width: 768px) and (device-height: 1024px) {
body {min-width: 701px}
}
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.
<meta name="viewport" content="width=device-width" />
<style>
body {
background-color: #e4e4e4;
font-family: 'PT Sans Narrow',Arial,sans-serif;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
.ExternalClass * {
line-height: 100%;
}
.bgimg {
background-image: url('http://worldtravelhub.com.au/newsletter/201401/images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}
.checkout-price {
position: absolute;
top: 590px;
margin-left: 25px;
width: 120px;
height: 120px;
font: 28px/120px Helvetica, Arial, sans-serif;
color: white;
text-align: center;
text-shadow: 0 -1px 1px rgba(black, .3);
text-indent: -1px;
letter-spacing: -1px;
background: #e54930;
border: 1px solid;
border-color: #b33323 #ab3123 #982b1f;
border-radius: 60px;
#include user-select(none);
#include linear-gradient(top, #f75a3b, #d63b29);
#include box-shadow(inset 0 1px 1px rgba(white, .3), 0 1px 2px rgba(black, .2));
}
.checkout-price:before {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border: 2px solid #f5f8fb;
border-radius: 60px;
#include box-shadow(inset 0 1px 1px rgba(white, .2), inset 0 -1px 1px rgba(black, .25), 0 -1px 1px rgba(black, .25));
}
.cheapest {
margin-left: 80px;
font-size: 14px;
padding-top: 22px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-width: 480px) {
div, p, a, li, td {
-webkit-text-size-adjust: none !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
img {
display: block !important;
max-width: 100% !important;
}
[class].hide {
display: none !important;
}
[class].w100 {
width: 100% !important;
text-align: left !important;
}
.cheapest {
margin-left: 5px;
font-size: 10px;
padding-top: 10px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
max-width: 100% !important;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 22px;
font-weight: bold;
}
.checkout-price {
margin-left: 0px;
top: 260px;
}
/*.bgimg {
background-image: url('images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}*/
}
#media only screen and (max-width: 767px) {
div, p, a, li, td {
/*-webkit-text-size-adjust: none !important;*/
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
img {
display: block !important;
max-width: 100% !important;
}
[class].hide {
display: none !important;
}
[class].w100 {
width: 100% !important;
text-align: left !important;
}
.cheapest {
margin-left: 5px;
font-size: 10px;
padding-top: 10px;
font-family: 'PT Sans Narrow',Arial,sans-serif;
max-width: 100% !important;
}
.bold {
font-weight: bold;
}
.indsub {
color: #e62529;
font-size: 22px;
font-weight: bold;
}
.checkout-price {
margin-left: 0px;
top: 260px;
}
}
</style>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<div style="background-color: #e4e4e4">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
<tr>
<td class="cell">
<table>
<tr>
<td>
<span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser Click Here</span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td>
<img src="http://worldtravelhub.com.au/newsletter/201401/images/high_quality_logo_wth.png" width="500" height="108" border="0" style="display: block"></td>
</tr>
</table>
<table border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td align="right" class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
</font>-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td>
<table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<!--<tr>
<td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>
<font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
</div>
</td>
</tr>-->
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<!-- <tr>
<td class="w100">
<img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />
</td>
</tr>-->
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<img src="images/600.png" border="0" style="display:block">-->
<div class="bgimg">
<p class="cheapest">
<span class="bold">We'll get you the CHEAPEST flights to the</span><br />
<span class="indsub">Indian Subcontinent</span>
</p>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td>
<table width="100%" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<span class="checkout-price">
<span style="font-size: 10px;">FROM</span> $850*
<!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></td>
</tr>
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->
<div style="text-align: center; margin-right: 30px;">
Toll Free: 1800 984 045<br />
info#worldtravelhub.com.au<br />
www.worldtravelhub.com.au
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100">
<p style="text-align: center;">
<span style="font-size: 22px; color: #e62529; letter-spacing: 3px; font-weight: bold;">Book online <span style="color: #000;">24/7 </span>at worldtravelhub.com.au</span><br>
<span style="font-size: 8px;">*A Verifiable written quote from another Australian registered travel businesses must be aproved and fare quoted must be generally avaliable to the public in the market and must be for the same date,seat class,fare category and airline and given to us before we make a booking for the customer.The quote must be for booked fares originating in Australia to Indian subcontinent.Lics No<span style="font-weight: bold;"> 2TA6049</span></span>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#888888">
<tr>
<td>
<table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>WorldTravelHub</strong><br>
Suite 4, 2 Kendall St,<br>
Harris Park NSW 2150</font></td>
</tr>
</table>
<table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
<tr>
<td align="right" class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>Phone:</strong> +61 2 8005 2797<br>
<strong>Fax:</strong>+61 2 8005 4237<br>
<strong>Email:</strong> info#worldtravelhub.com.au</font></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser Click Here</span>
<br>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
My html page works fine in all version of Chrome Browsers and IE 10,But Doesn't seem to work properly in IE 8 and IE 9,The problem is with padding-bottom css in class .bgimg.The Bottom Part of the page goes right below,when I add px instead of % it moves upwards and works but the text below ie contact details in red are no longer visible..Please help
Thanks for help in advanced
you can view it on this link..
http://worldtravelhub.com.au/newsletter/201401/201401.html
You can try to apply display: block; to any element and after give it padding-bottom
Remove padding-bottom and apply the height for the div bgimg. Also keep the background-size:cover for that.
.bgimg {
background-image: url('http://worldtravelhub.com.au/newsletter/201401/images/wth_map.jpg');
width: 100%;
background-size:cover;
background-repeat: no-repeat;
height:460px;
background-repeat: no-repeat;
}
<element style = "padding-bottom: 77%;"> </element>
been experience on css trouble like that , and some browser element needs to have their style in HTML, so try something like on the above rather than on css file.