I'm working on a two-column reponsive email. Everything is appearing perfect except that I can't get the right border in one of my TDs to remove on mobile. I have the following style set:
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
Strangely, the bottom border is adding just fine.
Here is my code. Any help would be greatly appreciated. I can't figure this one out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#media only screen and (max-width: 660px) {
table.view { width: 480px !important; }
table.container { width: 480px !important; }
table.left { width: 260px !important; }
table.right { width: 140px !important; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off-sm.gif) no-repeat;
height: 75px;
background-repeat: no-repeat !important;
background-position: center !important;
}
td.contact table { width: 100% !important; text-align: center;}
table.info p { text-align:center;}
table.copy { width: 480px !important; }
}
#media only screen and (max-width: 510px) {
table.view { width: 100% !important; }
table.container { width: 100% !important; }
table.left { width: 100% !important; margin-bottom: 10px; }
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
table.right { width: 100% !important; }
table.video td { padding-top: 15px; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif) no-repeat;
height: 88px;
background-repeat: no-repeat !important;
background-position: center !important;
vertical-align: middle;
text-align: center; }
table.copy { width: 100% !important; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="view">
<tr>
<td align="right" valign="middle" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:100%; color: #666; background: #FFF; padding: 8px 10px 8px 10px; vertical-align:middle;"><img src="http://www2.poscorp.com/images/addthis/16x16/email.png" alt="Forward Email" width="13" height="13" style="vertical-align: sub;"> Forward to a Friend | Email not displaying correctly? View it in your browser.</td>
</tr>
</table>
<table class="container" align="center" width="600" border="0" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF" style="border:1px solid #CCC;">
<tr>
<td class="header" bgcolor="#ffffff" style="border-top: #00a160 solid 10px; padding: 20px 60px 20px 20px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 27px; line-height:140%; color: #00a160; background: #FFF; ">When communicating with your patients, <span style="font-weight:bold;">consistency counts.</span></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 20px 20px;">
<table width="340" border="0" cellspacing="0" cellpadding="0" align="left" class="left" >
<tr>
<td class="copy" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; border-right: solid #00a160 1px; padding-right:20px;"><p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">POS provides practices customized print and digital communication to ensure your brand stands out – and that it stays consistent from one communication solution to the next. From print and messaging to billing and surveying, our services help you deliver communications in the patient’s preferred way, increase practice revenue and improve patient satisfaction.</p>
<p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">It's how you'll build loyalty while helping keep your patients healthy.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Print – With print services from POS, you’ll receive clarity, convenience and consistency – from your practice stationery to marketing materials.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Statement Processing & Patient Payment Services – POS provides solutions to improve your practice's profitability. We specialize in driving down the cost of collecting your patient-owed balances through our Statement Processing, Online Bill Pay and Past Due Notification solutions.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Digital Messaging – Our automated communication system, POS Messaging™, lets you send customized, two-way communication to your patients via email, phone, text or mail to help you reduce no-shows and more.</p>
<p style="margin-bottom: 0px; margin-top: 15px;">Patient Surveys – With POS Surveys™, you can find out what your patients like about your practice and what you can improve so they don’t leave.</p></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="right" class="right" >
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="video">
<tr>
<td style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; border-bottom: 1px #00a160 solid;"><p style="margin-top:0px; margin-bottom: 15px; text-align:center;"><img src="http://www3.poscorp.com/emarketing/market-growth/blog-logo.gif" alt="POS Blog - Communicate" width="150" height="69"></p>
<p style="margin-top:0px; margin-bottom: 10px;">The blog for best practices in patient communication.</p>
<p style="margin-top:0px; margin-bottom: 20px;">JOIN NOW</p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="promo">
<tr>
<td align="center" valign="middle" class="design"><p style="text-align:center; vertical-align:middle;" ><img src="http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif" width="200" height="88" alt="Free Design and 25% a new print item"></p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 10px 20px 20px 20px;"><p style="margin: 0px; ">For more information, contact your Regional Territory Manager, <span style="font-weight:bold;">%%user_name%%</span> at <span style="font-weight:bold;">%%user_phone%%</span> or <span style="font-weight:bold;">%%user_email%%</span>.</p></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 0px 20px; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><p style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 5px 0px 5px 0px; border-top: #CCC solid 1px; border-bottom:#CCC solid 1px; text-align:center; letter-spacing: 1px;">PRINT <span style="color:#00a160;">|</span> STATEMENT PROCESSING <span style="color:#00a160;">|</span> DIGITAL MESSAGING <span style="color:#00a160;">|</span> PATIENT SURVEYS</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><img src="http://www3.poscorp.com/emarketing/master/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></td>
</tr>
</table>
<table width="265" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td align="right"><p style="font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 100%; color: #333; font-weight:bold; margin:19px 0px 5px 0px;">800.331.4976 <span style="color:#00a160;">|</span> poscorp.com <span style="color:#00a160;">|</span> <img src="http://www3.poscorp.com/emarketing/master/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/> <img src="http://www3.poscorp.com/emarketing/master/youtube.jpg" width="39" height="16" alt="YouTube" border="0" style="vertical-align:bottom;"></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="copy">
<tr>
<td bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:120%; color: #666; background: #FFF; padding: 10px 10px 10px 10px; border-top:1px solid #CCC;">
<p style="margin-top: 0px; margin-bottom:10px;"><span style="font-weight:bold;">Our mailing address is:</span> <br>
%%account_address%%</p>
<p style="margin-top: 10px; margin-bottom:0px;">update subscription preferences</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Did you add it to the media query?, dont forget !important.
Related
On a typical HTML webpage, this would be very easy. For email, not so much.
I'm sure you're all familiar with the challenges of getting email clients to render things consistently. It basically throws divs out the window.
I'm concerned with the About, Practice Areas, etc. links..
Here's what I'd like to achieve
That's how it renders in a web browser, which is perfect.
But this is what I get in Outlook 2010.
My problem is.. I need to use text-align:center on the parent element to center everything. But in Outlook 2010, it stacks the children elements vertically instead of lining up in one row.
When I change it so I have just links inside the table (as opposed to nesting tables), I lose all padding on the links.
No padding on links..
Is there any way to do this?
<!DOCTYPE HTML>
<html>
<HEAD>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>|Jan '18|</title>
<style type="text/css">
#media(max-width: 500px) {
.frame {
width: 97% !important;
}
.fullIMG {
width: 100% !important;
}
#contentGrid {
padding: 10px 20px !important;
}
}
</style>
</head>
<BODY>
<!-- Beginning of white background table -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="width: 550px; background-color: white; border-left:1px solid black; border-right:1px solid black; opacity:.95" class="frame">
<tr>
<td>
<!-- Pre-Header -->
<tr>
<td style="text-align:center; padding: 0px 20px;">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!-- End of Pre-Header -->
<!-- Header Row -->
<tr>
<td>
<!-- Header Table -->
<table align="center" style="padding: 10px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.hupy.com/" target="_blank">
<img alt="Voted Best, Rated Vest" style="width: 90%; height: auto; " src="https://image.ibb.co/nai2NG/logo_tight.jpg"/>
</a>
</td>
</tr>
</table>
<!-- End of Header Table -->
</td>
</tr>
<!-- End of Header Row -->
<!-- Homebase Links Row -->
<tr>
<td>
<hr align="center" style="width:90%;">
<!-- Homebase Links Table -->
<table align="center">
<tr>
<td>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Homebase Links Table -->
</td>
</tr>
<!-- End of Homebase Row -->
<!-- Snipppet Row -->
<tr>
<td style="padding: 0px 20px" align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img class="fullIMG" src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" style="width: 100%; height: auto; box-shadow: 3px 3px 5px rgba(165,42,42,.7)">
</a>
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr>
<td>
Click me
</td>
</tr>
<!-- End of Snippet Row -->
<!-- Facebook Fans Row -->
<tr>
<td>
<!-- Facebook Fans Table -->
<table align="center" style="padding: 20px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" style="width: 85%; height: auto;">
</a>
</td>
</tr>
</table>
<!-- End of Facebook Fans Table -->
</td>
</tr>
<!-- End of Facebook Fans Row -->
<!-- Social Links Row -->
<tr>
<td>
<!-- Social Links Table -->
<table align="center" cellspacing="5" cellpadding="5" border="0">
<tr align="center">
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2);" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000);" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3);" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr align="center">
<td>
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
<!-- End of Social Links Table -->
</td>
</tr>
<!-- End Social Links Row -->
</td>
</tr>
</table>
<!-- End of white background table -->
</BODY>
</html>
Okay so here is a revised HTML email template.
First - you have to do a few things. Outlook is super secondary, but unfortunately people still use it. It's horrible.
So you account for that in quite a few ways - in the code and within the header. Luckily your email isn't TOO tricky, so there wasn't any real call for !mso in the body of the email.
Secondly - try to make your emails ALSO responsive. Remember that 75% of ALL email is read on a phone. Your email looked like a bit of a mashup. Not in a bad way.
The header links were lining all straight down on Outlook because you had EACH ONE in it's own table. Outlook interpreted that to be tables (obviously) and made each one 100% of the email width. If you place the links inside a table and then each one inside a <td> you will get better results.
lastly, there are some interesting shading things going on your email that may or may NOT work in all email clients. I left them but I'd be surprised if they did.
I'd say that you can probably take this code and place it into almost any ESP and it should work. You have to always be mindful of who you are coding emails for, and keep that in mind when it comes to how you design.
Good luck! There's lots more so if you have a question, go ahead and ask.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="date=no"/>
<meta name="format-detection" content="telephone=no"/>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title>Royal Caribbean - Advantage Program</title>
<style type="text/css">
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: separate !important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse:separate;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table[class=full] {
width: 100%;
clear: both;
}
div {
padding: 0;
margin: 0;
}
p{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
h1{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
#wrappertable{
margin:0;
padding:0;
width:100% !important;
line-height:100% !important;
}
br[class=show]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
#media screen and (max-width:600px){
table{
width:100% !important;
}
table[class=content]{
width:95% !important;
}
td[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
td[class=fullwidth]{
width:100% !important;
float:left !important;
}
/*replace image with mobile version*/
td#pic1 img{
content:url("") !important;
}
/*repeat ID as necessary*/
img[class=fullwidth]{
width:100% !important;
height:auto !important;
}
img[class=threequarters]{
float: none !important;
width: 75% !important;
height: auto !important;
margin: auto !important;
}
img[class=twothirds]{
float: none !important;
width: 66.6666% !important;
height: auto !important;
margin: auto !important;
}
img[class=halfwidth]{
float: none !important;
width: 50% !important;
height: auto !important;
margin: auto !important;
}
img[class=onethird]{
width: 33.3333% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=quarterwidth]{
width: 25% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
div[class=fullwidth]{
max-width: 95% !important;
}
p,h1,h2[class=centered]{
text-align: center !important;
}
br[class=show]{
display: inline !important;
}
br[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
span[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0" bgcolor="#eeeeee" style="padding: 0 !important; margin:0 !important;">
<center>
<table width="100%" style="border-collapse:collapse; table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" id="wrappertable">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="620" bgcolor="#f9f9f9" style="box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.10);">
<tr>
<td width="618" align="center">
<!--THIS IS THE CONTENT TABLE-->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td align="center">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!--use empty rows for spacing-->
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<img src="https://image.ibb.co/nai2NG/logo_tight.jpg" alt="Voted Best, Rated Vest" width="580" height="150" class="fullwidth"/>
</td>
</tr>
<tr>
<td align="center" height="40" style="line-height: 40px;">
<hr align="center" width="80%" size="1" noshade="noshade"/>
</td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%">
<tr>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%">
<tr>
<td align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left; line-height: 32px;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
</td>
</tr>
<tr><td height="10" style="line-height: 10px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" width="580" height="325" style="box-shadow: 3px 3px 5px rgba(165,42,42,.7)" class="fullwidth">
</a>
</td>
</tr>
<tr><td height="10" style="line-height: 10px; font-size: 1px;"> </td></tr>
<tr>
<td align="left">
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" width="500" height="183" class="fullwidth">
</a>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2); padding-left: 10px; padding-right: 10px;" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
</td>
<td align="center">
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000); padding-left: 10px; padding-right: 10px;" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
</td>
<td align="center">
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3); padding-left: 10px; padding-right: 10px;" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr><td colspan="3" height="20" style="line-height: 20px;"> </td></tr>
<tr>
<td align="center">
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
</td>
<td align="center">
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
</td>
<td align="center">
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
To make a table responsive, just add a media querie like that (direct child selector doesn't affect tables inside this table) :
Code
<table class="responsive-table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
The media queries :
<style>
#media all and ( max-width: 600px ) {
.responsive-table, .responsive-table > tbody, .responsive-table > tbody > tr, .responsive-table > tbody > tr > td {
display: block !important;
width: 100% !important;
}
}
</style>
You can ajust for your needs
I've been having an issue with how outlook has been displaying table HTML for a while now, and I have not been able to resolve this issue for the life of me. Basically, there's a line that cuts through the containing <td> when nesting tables (see the slight gray line in the attached image to the right of the purple <td>).
This is on email's code I've been working with as an example.
<style type="text/css">
#media only screen and (max-width:480px){
.templateColumns{
width: 100% !important;
}
.body-text {
font-size: 16px !important;
}
.body-about-us {
font-size: 15px !important;
}
.center-align {
text-align: center !important;
}
.column-image {
height:auto !important;
max-width:480px !important;
width: 100% !important;
}
.column-container {
display: block !important;
width: 100% !important;
}
.sociologos-container {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 15px !important;
padding-bottom: 5px !important;
}
.mopad-left {
padding-left: 15px !important;
}
.mopad-right {
padding-right: 15px !important;
}
.mopad-top {
padding-top: 15px !important;
}
.mopad-bottom {
padding-bottom: 15px !important;
}
.mopad-button-bottom {
padding-bottom: 30px !important;
}
.nopad-bottom {
padding-bottom: 0 !important;
}
.nopad-top {
padding-top: 0 !important;
}
.nopad-left {
padding-left: 0 !important;
}
.nopad-right {
padding-right: 0 !important;
}
.modisplay-none {
display: none !important;
}
.mainbtn {
max-width: 450px !important;
width: 100% !important;
margin-top: 10px !important;
}
.mainbtn a{
display:block !important;
}
.mobold {
font-weight: bold !important;
}
.heading {
font-size: 32px !important;
line-height: 36px !important;
}
.heading2 {
font-size: 24px !important;
line-height: 28px !important;
}
.heading3 {
font-size: 20px !important;
line-height: 20px !important;
}
.sociologos {
width: 32px !important;
height: 32px !important;
}
.join-us {
text-align: center !important;
}
}
p {margin-bottom: 25px;
margin-top:10px;}
</style>
<body vlink="#421b3e" style="margin:0; padding: 0; background-color:#f2f2f2;"><!--this sets the visited link color, a background color and eliminates any potential auto padding on the page-->
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="bodytable" style="background-color:#f2f2f2; font-family: Arial, Helvetica, sans-serif;">
<tr>
<td align="center" valign="top" style="padding-top:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="580" class="templateColumns mopad-bottom nopad-top mopad-left mopad-right" style=" background-color: #f2f2f2; padding-top: 0; padding-bottom: 25px; margin:0;">
<!-- start PURPLE HEADER -->
<tr>
<td width="100%" align="center" valign="top" class="templateColumns mopad-left mopad-right mopad-top mopad-bottom" id="logo" style="margin:0; background-color: #f2f2f2; padding-top: 20px; padding-bottom: 20px;">
LOREM IPSUM
</td>
</tr>
<!-- end PURPLE HEADER -->
<!-- start INTRO SECTION -->
<tr>
<td align="center" valign="top" class="templateColumns" width="100%" style="background-color: #ffffff; padding: margin:0;"><img class="column-image" src="http://go.advicentsolutions.com/rs/841-KAP-325/images/FosteringGrowth2016TitleBanner.png" alt="Nurturing Growth" width="580" style="display:block;" /></td>
</tr>
<!-- end INTRO SECTION -->
<!-- start FIRST CONTENT SECTION -->
<tr>
<td width="100%" class="mopad-left mopad-right mkteditable" id="primary-content" style="background-color: #ffffff; font-family: Arial, sans-serif; padding-top:15px; padding-bottom:30px; padding-left:40px; padding-right:40px;">
<!--<h3 class="body-text mopad-right mopad-left" style="font-family: Arial, sans-serif; font-size: 17px; color: #3c3d42; letter-spacing: -.25px; line-height: 1.5em; font-weight: bold; margin:0; padding: 0 0 5px 0; ">Did you know?</h3>-->
<p class="heading2" style="text-align:center; font-size: 28px; color: #3c3d42; line-height: 30px;">lorem ipsum</p>
<p class="margin" style="text-align:center; font-family: Arial, sans-serif; font-size: 16px; color: #727577; line-height: 22px; font-weight: 400; ">lorem ipsum</p>
<table align="center" cellpadding="0" cellspacing="0" width="60%" style="background-color:#6a3757; border-radius: 2px; font-family: Arial, sans-serif; padding:2px; margin: auto;">
<tr>
<td align="center" style="font-family: Arial, sans-serif; color: #ffffff; border-radius: 4px; background-color: #6a3757; padding-top: 10px; padding-bottom: 10px;"><strong>lorem ipsum</strong></td>
</tr>
</table>
</td>
</tr>
<!-- end MAIN CTA BUTTON -->
<!-- start SOCIAL MEDIA SECTION -->
<tr>
<td width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="social-media" style="font-family: Arial, Helvetica, sans-serif; background-color: #f2f2f2; padding-left: 5px; padding-right: 5px; padding-bottom: 10px; padding-top: 10px; margin:0; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" class="column-container join-us" width="50%" style="font-family: Arial, sans-serif; font-size: 14px; color: #3c3d42; ">
Join the Community!
</td>
<td aLOREM IPSUM class="column-container" width="50%">
<table cellpadding="0" class="sociologos-container" cellspacing="0" style="font-family: Arial, sans-serif;">
<tr>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/google_42.png" width="32" height="32" alt="Google Plus" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;">><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/twitter_42.png" width="32" height="32" alt="Twitter" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/facebook_42.png" width="32" height="32" alt="Facebook" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/linked_42.png" width="32" height="32" alt="LinkedIn" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" class="sociologos" style="display: block; padding-left:5px;" src="http://www.advicentsolutions.com/images/email/youtube_42.png" width="32" height="32" alt="Youtube Channel" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end SOCIAL MEDIA SECTION -->
<!-- start DISCLAIMER -->
<tr>
<td align="left" valign="top" width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="disclaimer" style="color:#727577; font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 5px; padding-right:5px; padding-top:10px; margin:0;">
LOREM ISPUM
</td>
</tr>
<!-- end DISCLAIMER -->
</table>
</td>
</tr>
</table>
</body>
It displays fine as HTML, but I send mostly B2B stuff which means we're always trying to optimize for office. Sometimes the sizing of the banner image can affect it, but other than that one factor, when this happens seems completely arbitrary. It's the one Outlook workaround I haven't been able to figure out. Is there something in my code I'm missing?
Finnnaaalllly found the solution about ten min after posting this. Trick was to remove the padding inline css that was tied to the Lorem ipsum text within the table in the code.
I also fixed this in other instances where <p> tags applied to links in the tds also caused issue. Removing the <p> tags around the links within the table and any padding accompanying it fixes the issue.
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.
I'm trying to create four evenly-spaced <table> cells but for some reason, I am having a little difficulty doing this (even though I have set certain widths for them).
An example can be seen below, where the second cell appears larger than the others:
<tr>
<td style="width: 100%; padding: 0px 20px 0px 20px;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
<table style="width: 600px; border-collapse: collapse; border: 1px solid orange;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
<tbody cellspacing="0" cellpadding="0" border="0" colspan="12" align="center" style="width: 100%;" width="100%">
<tr cellspacing="0" cellpadding="0" border="0" colspan="12" align="center" style="width: 100%;" width="100%">
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Bullhorn Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Dolorla ti <br />amet silio</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Lab Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Adipiscing <br />consecteture</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Atom Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Facili elit <br />torem</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="File Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Ipsum sit <br />sepida colt</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
JSFiddle
How do I create four evenly-spaced table cells?
You need to use the table-layout propertie.
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
In your case:
<table style="width: 600px; border-collapse: collapse; border: 1px solid orange;table-layout:fixed;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
DEMO
As you will notice, when you inspect the parsed content in some devoloper tools, like in Chrome, your <td>'s width: 148px is overruled, and replaced with a computed width like 103.8546546px and so on. Simply add
table {
table-layout: fixed;
}
to your CSS or as inline style., and you will get what you want.
forked fiddle -> http://jsfiddle.net/CaVpC/
I am trying to develop an HTML newsletter and I am experiencing problems with alignment. I have two adjacent cells ("week" and "03/2013" with different font-size and they should be align to the bottom. Tha standard solution which renders well in browsers doesn't render well in Outlook 2007. So I used a heuristic percent value to align the cells and this works in Outlook. But it's no surprise that it doesn't work in iPhone/iPad. Does anybody know how to make it work on both?
Thanks a lot
Here is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--[if gte mso 9]>
<style _tmplitem="50" >
.article-content ol, .article-content ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]-->
<style type="text/css">
#media screen and (max-width: 610px) {
a[class=fabsize]{text-decoration:none;color:#00FF00}
}
.l-footer a {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:link {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:visited {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:hover {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:active {
color: #b2b2b2;text-decoration: underline;
}
</style>
</head>
<body>
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td align="center" bgcolor="#FFFFFF" style="color: #6f6f6f; border: #6f6f6f;">
<!-- block preamble starts -->
<table class="l-preamble" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="has-border-bottom-1" height="16" width="600" style="color: #6f6f6f; border-bottom: 1px solid #6f6f6f;"></td>
</tr>
<!-- element preamble-info ends -->
<!-- element preamble-year starts -->
<tr>
<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;">
<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="29" width="474" border="1" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td>
<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold; border: #6f6f6f; font-size: 12px; line-height: 115%;" valign="bottom">WEEK</td>
<td width="91" height="29" class="header" style="vertical-align: bottom; text-align: right; letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold; border: #6f6f6f;" align="right" valign="bottom">03 / 2013</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
try this one. basically, put those texts in the same cell instead of two.
<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left;">
<tr>
<td height="29" width="474" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td>
<td align="right" height="29" width="126" style="color: #6f6f6f; font-weight: bold; font-size: 12px; line-height: 115%;">WEEK <span style="letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold;">03 / 2013</span></td>
</tr>
</table>
Try set line-height of "week" to font size from date. (line-height: 22px;)
<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold; border: #6f6f6f; font-size: 12px; line-height: 22px;" valign="bottom">WEEK</td>
here: http://jsbin.com/anejax/1/
Or if u want all text aligned to bottom u have to set valign="bottom" in
<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;" valign="bottom">
here: http://jsbin.com/ipafoh/1/
The title of the question says “to baseline”, but the text says “to the bottom”. And you are in fact using vertical-align: bottom.
I assume that you want baseline alignment. Then you should simply set vertical-align: baseline (and remove any code you might have added to try some heuristic – i.e., guesswork – adjustment to turn bottom alignment to baseline alignment).
In email always use the html valign="bottom" to align anything to the bottom of a table cell.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="100" width="300" valign="bottom" style="font-size:12px;" bgcolor="#959595">
cell 1
</td>
<td height="100" width="300" valign="bottom" style="font-size:18px;" bgcolor="#858585">
cell 2
</td>
</tr>
</table>