HTML code isn't working on Inbox by Gmail - html

I am able to hide a table by using below code in Gmail, but same isn't working on Inbox by Google. Please review below code and help me to hide this table on Inbox by Google.
<!--[if !mso]><!--><table cellspacing="0" cellpadding="0" class="mobileShow" align="center" style="width:320px; background-color:#ffffff; max-height: 0px !important; display: none !important; overflow:hidden; float:left; line-height:0px; mso-hide: all;">
<tr>
<td style="width:85px;">
<table cellspacing="0" cellpadding="0" style="width:85px; background-color:#f8f8f8;">
<tr>
<td style="width:85px; height:66px; background-color:#ffffff;"></td>
</tr>
<tr>
<td style="width:85px; height:159px; background-color:#f8f8f8;"></td>
</tr>
</table>
</td>
<td style="width:150px; background:url(http://in.bmscdn.com/events/Large/ET00041490.jpg) no-repeat center center; height:225px; background-color:#adadad; border-radius:5px; background-size: 100% 225px;"><img src="http://in.bmscdn.com/mailers/images/160720bmsreview/playbtn.png" style="margin:75px auto;display:block;" height="60" border="0" width="60"></td>
<td style="width:85px;">
<table cellspacing="0" cellpadding="0" style="width:85px; background-color:#f8f8f8;">
<tr>
<td style="width:85px; height:66px; background-color:#ffffff;"></td>
</tr>
<tr>
<td style="width:85px; height:159px; background-color:#f8f8f8;"></td>
</tr>
</table>
</td>
</tr></table><!--<![endif]-->

You really haven't submitted enough of an example for me to understand what's going on, but the fact that you're using !important suggests to me that you're not using inline styles. Try that out, emails are a pain to work with but inline usually works better.

This should cover all your bases (as inline CSS):
{
display:none;
font-size:1px;
line-height:1px;
max-height:0px;
max-width:0px;
opacity:0;
overflow:hidden;
mso-hide:all;
}
Edit (as inlined):
<table style='display:none;font-size:1px;line-height:1px;
max-height:0;max-width:0;opacity:0;overflow:hidden;
mso-hide:all;' cellspacing='0' cellpadding='0' border=0>

Related

Responsive html newsletter - mobile issues when sending to different email clients

The following code has several issues when sending all Html5 newsletters I coded.
I received footer code from the client, but it seems that it doesn't work more.
Remaining parts of the newsletters works well.
I copied an empty template mail I usually use to code my htmls.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxxxxx/title>
<style>
ul {
list-style-position: inside;
padding-left: 0;
}
a {
color: inherit !important;
text-decoration: none !important;
}
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;
}
.content {
width: 100%;
max-width: 600px; !important
}
/* GENERAL STYLE RESETS */
body, #bodyTable { height:100% !important; width:100% !important; margin:0 !important; padding:0 !important; }
table, td { border-collapse:collapse; }
.hyphenate {
/* Careful, this breaks the word wherever it is without a hyphen */
overflow-wrap: break-word;
word-wrap: break-word;
/* Adds a hyphen where the word breaks */
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*remove blue links for iOS*/
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;}
#media only screen and (max-width: 480px) {
/* MUESTRA ENLACE EN MOVIL */
.bloque{width: 100%; display: block!important; height: 40px!important; vertical-align: middle!important}
.bloque2{width: 100%; display: block!important; vertical-align: middle!important}
.bloque2 table{width: 100% !important;}
table.body {float:left;width:100% !important;padding:0;font-size:13px !important}
.ancho{width:100% !important}
.ancho2{width:100% !important;text-align:center !important}
.ancho3{width:33% !important;margin-bottom:12px !important}
.ancho3_2{width:25% !important;margin-bottom:12px !important}
.anchotlfn{width:26% !important;margin-bottom:12px !important}
.ancho4{width:98% !important}
.anchon{width:50% !important}
.separa{ padding:8px 0 !important}
.iber{margin:20px 0 0 25% !important}
.logo{width:40% !important}
.logo2{width:76% !important}
td.izqui{text-align:left !important}
.verde{width:100% !important;font-size:14px !important}
.gg{width:100% !important;font-size:18px !important}
.verde2{width:100% !important;font-size:13px !important}
.oculto{display:none !important}
.pie{line-height:auto !important;font-size:11px !important}
.pdtop{padding-top:10px!important}
.pdbot{padding-bottom:10px!important}
.pe{width:80% !important;padding-top:3px !important}
.alto{ height:10px !important;}
.centrado{text-align:center !important; padding:5px 0 20px 0 !important;}
.nopad{padding-left: 0px !important}
.izq{text-align:left !important; float:left !important}
}
</style>
</head>
<body bgcolor="#FFFFFF" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#000511">
<!--[if mso]>
<table width="600" border="0" align="center" margin bgcolor="#ffffff" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table class="content" width="100%" border="0" align="center" bgcolor="#5c881a" cellpadding="0" cellspacing="0" style="margin: 0 auto">
<tr>
<td bgcolor="#FFFFFF"><table width="550" border="0" cellspacing="0" cellpadding="0" class="ancho">
<tr>
<td width="24"> </td>
<td width="502"><table width="75%" border="0" cellspacing="0" cellpadding="0" class="ancho" align="left">
<tr>
<td> </td>
</tr>
<tr>
<td style="color:#262626;font-size:12px;font-family:Arial,Helvetica,sans-serif">Se non riesci a visualizzare correttamente il messaggio, clicca qui</td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="15" class="ancho">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/xxx.jpg" width="100%" border="0" alt="a"></td>
</tr>
<tr>
<td><img src="img/bordo-top.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="45">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="justify" style="color:#5c881a;font-size:16px;font-family:Arial,Helvetica,sans-serif; line-height: 23px; text-align: justify;">test
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="img/bordo.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td>
<br>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#5d881a">
<td width="160" height="60" valign="middle" bgcolor="#5d881a" class="bloque pdtop"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/tel.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
xxx xxx xxx</td>
</tr>
</tbody>
</table>
</td>
<td width="140" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:140px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/sito.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a href="" target="_blank"
style="color: #ffffff; text-decoration: none">xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="255" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:255px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif" >
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/mail.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a style="color: #ffffff; text-decoration: none"
href="mailto:servizioclienti#iberdrola.it">servizioclienti#xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td height="60" width="110" valign="middle" bgcolor="#5d881a" class="bloque pdbot"
style="text-align: left; width:110px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="46"><a href="https://www.facebook.com/xxxxxxxxx/"
target="_blank"><img src="img/fb.gif" border="0"></a></td>
<td width="46"><a href="https://twitter.com/xxxxxxxxx" target="_blank"><img
src="img/tw.gif" border="0"></a></td>
<td><a href="https://www.instagram.com/xxxxxxxxx/" target="_blank"><img
src="img/ig.gif" border="0"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td><img src="img/line.gif" width="100%"></td></tr>
<tr><td style="text-align: left; color:#ffffff;font-size:14px;font-family:Arial,Helvetica,sans-serif"><br><br>XXXXX</td></tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<tr>
</table>
<![endif]-->
</body>
</html>
expected mobile visualization screenshot
actual visualization when the mail is sent
Desktop visualization

HTML email signature broken in Outlook on Mac - Works fine on Windows?

I have created an email signature and its tested working perfectly on the following: Outlook for Windows 2019, Outlook for iOS, Gmail webapp, Outlook webapp.
For some reason when i add it to Outlook for Mac version 16.29 it breaks. I sent it from my mac to my iphone and it wasn't responsive at all.
Any ideas why its only like this from the mac and working everywhere else? How do i fix it.
I have all the media queries to make it responsive. I have coded in tables so it should look fine in Outlook.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600,700,800,900" />
<style type="text/css">
/* Client-Specific styles */
#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass { width:100%; } /* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/
img { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
a img { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
p { margin:0px 0px !important; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td { border-collapse:collapse; }
/* iPad Styles */
#media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration:none;
color:#000000;
pointer-events:none;
cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration:default;
color:#000000 !important;
pointer-events:auto;
cursor:default;
}
}
/* iPhone Styles */
#media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration:none;
color:#000000;
pointer-events:none;
cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration:default;
color:#000000 !important;
pointer-events:auto;
cursor:default;
}
}
/* Responsive styles */
#media only screen and (max-width: 480px) {
td[class=wrapper] {
padding-top:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}
table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
width:320px !important;
height:auto !important;
}
td[class=clump] {
display:block !important;
padding-left:0 !important;
padding-right:0 !important;
width:100% !important;
}
td[class=aligncenter] {
width:300px !important;
height:auto !important;
text-align:center !important;
}
}
</style>
</head>
<body>
<table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td style="background;">
<table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td valign="top" align="left" class="clump">
<img src="https://i.imgur.com/v1NoHym.jpg" alt="Avatar" border="0" height="200" width="200" style="display:block; outline:none; border:0;" />
</td>
<td valign="top" align="left" class="clump" style="padding:0 0 0 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td style="padding:15px 0 0 20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-family:'Raleway', sans-serif, Arial; font-size:22px; line-height:30px; font-weight:800; color:#2f3542;">First Name</td>
</tr>
<tr>
<td style="font-family:'Raleway', sans-serif, Arial; font-size:15px; line-height:22px; font-weight:500; color:#989faf;">Position</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:20px 0 0 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="40%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="28" height="30" valign="top"><img src="https://i.imgur.com/qdSJcZJ.png" alt="Web" border="0" height="22" width="22" style="display:block; border:0; outline:none;" /></td>
<td align="left" width="" height="30" valign="top" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;">0000 0000 000</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:5px 0 0 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="60%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="28" height="30" valign="top"><img src="https://i.imgur.com/mDkpstX.png" alt="Email" border="0" height="22" width="22" style="display:block; border:0; outline:none;" /></td>
<td width="" height="30" valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;">info#example.com</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:5px 0 9px 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="40%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="28" height="30" valign="top"><img src="https://i.imgur.com/qdSJcZJ.png" alt="Web" border="0" height="22" width="22" style="display:block; border:0; outline:none;" /></td>
<td width="" height="30" valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;">example.com</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="" align="left" style="background; padding:0 0 0 40px;">
<img src="https://i.imgur.com/e1Ykoqm.png" alt="Facebook" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" />
<img src="https://i.imgur.com/vSFaFlh.png" alt="Twitter" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" />
<img src="https://i.imgur.com/SAtoqFt.png" alt="Instagram" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" />
<img src="https://i.imgur.com/L9Z3ciV.png" alt="LinkedIN" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" />
<img src="https://i.imgur.com/jE3sFh0.png" alt="YouTube" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td style="background;">
<table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td valign="top" align="left" class="clump" style="padding:20px 0 0 20px;">
<img src="https://i.imgur.com/tGGrM3B.jpg" alt="Avatar" border="0" height="120" width="120" style="display:block; outline:none; border:0;" />
</td>
<td valign="top" align="left" class="clump" style="padding:0 0 0 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td style="padding:15px 0 0 20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-family:'Raleway', sans-serif, Arial; font-size:11px; line-height:22px; font-weight:500; color:#989faf;">This message and any attachments are confidential and intended for the named addressee(s) only. If you have received this message in error, please notify the sender then delete the message. Any unauthorized modification, use or dissemination is prohibited. The sender shall not be liable for this message if it has been modified, altered, falsified, infected by a virus or even edited or disseminated without authorization. </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Two things you could try.
You are missing the quotation marks in your css td[class=wrapper] should be td[class="wrapper"]
I have bad experience with using this kind of css selectors, try changing all to a normal .-format, like td[class=wrapper] is td.wrapper

Remove spacing between table rows in HTML email

Let me start by saying that I haven't built an HTML email in a long time; I've been spoiled by CSS for far too long, so going back to building things with tables is incredibly frustrating. I am having trouble getting two rows to sit flush against each other; there is a gap that I can't eliminate, no matter what I've tried. Scouring other posts on S.O. only yields solutions I've already tried and that have not worked. About 40% of the intended audience is viewing emails on Outlook, meaning CSS support is incredibly limited. Things I've tried:
border-collapse:collapse (which I already put in place by default from the start)
setting margin: 0 (just about everywhere)
cellspacing and cellpadding to zero (which I already did by default when building the tables).
display:block and display:inline-block (not really supported by Outlook, but didn't solve my problem anyway).
Here are my code snippets (ignore any CSS classes; again there is not yet any embedded CSS, those are just placeholders at this point. Any embedded CSS will primarily be to handle email client-specific issues.)
<!--2 Column Layout : BEGIN-->
<tr>
<td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
</td>
</tr>
</table>
</td>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--2 Column Layout : END-->
<!--2nd Hero Image : BEGIN-->
<tr>
<td class="full-width-image">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
</td>
</tr>
<!--Hero Image : END-->
The small gap at the bottom of the row is visible if you look closely. It is 4px in height.
I t looks good; not bad. Also, you don't need to add all the css details to each row and column; just add: or or ; and then in your css sheet (If you don't have it then just create on) add td.Whatever-you-decide-to-name-it or tr.Whatever-you-decide-to-name-it or table.Whatever-you-decide-to-name-it.
Hope this helps!!!
Since your img is not containing a width (even auto), initialize it as a block element.Since you have mentioned that block is not supported in your case I added display:table for your img. I added the working snippet with this answer.
img {
display: table;
}
<!--2 Column Layout : BEGIN-->
<tr>
<td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
</td>
</tr>
</table>
</td>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--2 Column Layout : END-->
<!--2nd Hero Image : BEGIN-->
<tr>
<td class="full-width-image">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
</td>
</tr>
<!--Hero Image : END-->
Since display:block wasn't a solution, I tried removing the <!doctype html> declaration and that fixed the issue. Normally I don't think this would be acceptable, but to the best of my knowledge - and after testing - it does not have any negative impact for HTML email.

Having issue with the responsive html email template

I want after the divider next column will come down like responsive thing works right.
Also I think above html code having issue it's not behaving like responsive.
Here's a codepen example: https://codepen.io/aman111/pen/YQGzGd?editors=1000
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#media only screen and (max-width:480px){
table td[class="divider"] {
display: none !important;
}
table td[class="one"] {
width:100% !important;
}
.left {
width: 100% !important;
}
.right {
width: 100% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%">
<tr>
<td class="one" style=" padding:10px 0 10px 10px;" width="40%">
<table border="0" cellpadding="0" cellspacing="0" class="left" width="100%">
<tr>
<td valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:299px; padding-right:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="divider" style="background-color: red;" width="1"></td>
</tr>
</table>
</td>
<td class="two" style=" padding:10px 10px 10px 0;" width="40%">
<table border="0" cellpadding="0" cellspacing="0" class="right" width="100%">
<tr>
<td class="divider" style="background-color: red;" width="2"></td>
<td>
<table>
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:300px; padding-left:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>------------------------ Has anyone faced this kind of issue if solve it then please help me out Actually i want after the divider next column will come down like responsive thing works right. Also i think above html code having issue it's not behaving like responsive. Please guys look into this and help me out. Many thanks
</body>
</html>
This is how the code should look. Its taking into account Android not reading TD's to break into rows and using CSS that Gmail should read as well.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#media screen and (max-width:480px){
.divider {display: none !important;}
.break th{display:block !important; width:100% !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%" class="break">
<tr>
<th style=" padding:10px 0 10px 10px;font-weight:normal;margin:0px;" width="40%">
<table border="0" cellpadding="0" cellspacing="0" class="left" width="100%">
<tr>
<td valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:299px; padding-right:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="divider" style="background-color: red;" width="1"></td>
</tr>
</table>
</th>
<th style=" padding:10px 10px 10px 0;font-weight:normal;margin:0px;" width="40%">
<table border="0" cellpadding="0" cellspacing="0" class="right" width="100%">
<tr>
<td class="divider" style="background-color: red;" width="2"></td>
<td>
<table>
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:300px; padding-left:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
Let me know if this works for you.

Email Templating for Outlook - What are the Tricks on padding/distance?

i hate writing email templates.
with that said, i have a pretty good table'd template created yet Outlook 2007 and Outlook 2010 is creating a lot of spacing between the TR than I notice in other email clients.
OL 2007 (http://screencast.com/t/YJ5LdTkiGR)
OL 2010 (http://screencast.com/t/Ob1ii370C)
The code is found below. Any help in getting things to work in Outlook would be greatly appreciated so I can learn and next time not have to bug you :)
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0">
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Please try to use below inline style to empty tds avoid more spacing of because empty tds
style="font-size:0%; line-height:1px; mso-line-height-rule:exactly;"
simple and happy coding
The extra space is caused by this empty row:
<tr>
<td> </td>
</tr>
Try replacing that row with:
<tr>
<td height="0" style="padding: 0; margin: 0; height: 0;"></td>
</tr>
Alternatively, sometimes when dealing with Outlook it's easiest to use <br> for spacing.
Here's your full HTML with 2 <br> added at the end of the last paragraph:
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.<br><br>
</td>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0" style="display:block">
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>