Search code examples
htmlhtml-tablehtml-emailnewsletter

Newsletter email - can't find what's wrong with my code. No errors in Dreamweaver either

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><a href="#" style="color: #333333; font-weight: bold">View Online in Browser.</a> If you prefer not to receive email from us, <a href="%7B%7B%7Bunsubscribe%7D%7D%7D" style="color: #333333">click here to unsubscribe.</a><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"><a href="http://www.eztaxreturn.com" target="_blank" style="color: orange"><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"></a></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 &amp; 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">
<a href="http://blog.eztaxreturn.com/2015/08/review-your-taxes-now-to-prevent-a-surprise-next-spring/" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">Review your taxes now to prevent<br>a surprise next spring</a><br>
Don’t let tax time fool you. Some people are overjoyed<br>to receive a big refund at tax time...
<a href="http://blog.eztaxreturn.com/2015/08/review-your-taxes-now-to-prevent-a-surprise-next-spring/" style="color: #fb7016; text-decoration: none">[READ MORE]</a><br><br><a href="http://blog.eztaxreturn.com/2015/08/furthering-your-education-has-tax-benefits/" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">Furthering your education<br>has tax benefits</a><br>
Enjoy the rest of your summer while you can, school will<br>be back in session before you know it... <a href="http://blog.eztaxreturn.com/2015/08/furthering-your-education-has-tax-benefits/" style="align: right; color: #fb7016; text-decoration: none">[READ MORE]</a>
<br><br><a href="http://blog.eztaxreturn.com/2015/08/6-tips-for-exercising-safely-in-the-summer-heat/" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">6 tips to exercise safely in the summer heat</a><br>
Summer’s the perfect time to get off the couch and<br>engage in outdoor activities... <a href="http://blog.eztaxreturn.com/2015/08/6-tips-for-exercising-safely-in-the-summer-heat/" style="color: #fb7016; text-decoration: none">[READ MORE]</a>
<br><br><a href="#" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">Easy ways to keep your home safe<br>while you travel</a><br>
Imagine returning from the vacation of a lifetime to find<br>your home ransacked... <a href="#" style="color: #fb7016; text-decoration: none">[READ MORE]</a>
<br><br><a href="#" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">Did you file a tax extension?<br>The clock is ticking...</a><br>
April 15th has come and gone but the tax season hasn’t ended for nearly 13 million people... <a href="#" style="color: #fb7016; text-decoration: none">[READ MORE]</a>
<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><a href="http://www.6.eztaxreturn.com/scriptsez/start.exe/eztax/testimonials.html" style="color: #fb7016; text-decoration: none">[READ MORE TESTIMONIALS]</a>
<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">
<a href="http://www.facebook.com/eztaxreturn" style="color: orange"><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"></a>
</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">
<a href="http://www.eztaxreturn.com/" style="color: #333333; font-family: Arial, Helvetica; text-decoration: none">Start a Return</a><br><a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/password_a.html?DownloadReturn=TRUE" style="color: #333333; font-family: Arial, Helvetica; text-decoration: none">Download a Return</a><br><a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/password_a.html?check_efile=TRUE" style="color: #333333; font-family: Arial, Helvetica; text-decoration: none">What's my ezStatus</a><br><a href="https://sa2.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp" style="color: #333333; font-family: Arial, Helvetica; text-decoration: none">Where's my Refund?</a>
</td>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding-top: 20px">
Read more<br>
from our blog.<br><br><a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/password_a.html?check_efile=TRUE" style="color: #fb7016; font-family: Arial, Helvetica; text-decoration: none">blog.eztaxreturn.com</a><br>
</td>
</tr>
<tr><td colspan="2" style="border-collapse: collapse; padding: 93px 0px 0px">
<a href="http://www.twitter.com/eztaxreturn" style="color: orange"><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"></a>
</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 <a href="mailto:%7B%7B%7Bemail_address%7D%7D%7D" style="color: orange">{{{email_address}}}</a>.<br><a href="%7B%7B%7Bunsubscribe%7D%7D%7D" style="color: #666666">Click Here To Unsubscribe</a><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>
Solution

  • 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