i want to create a newsletter compatitable with Outlook. I'm getting a huge gap on the left only on Outlook clients. It's written in HTML.
http://www.nikosdelig.com/eurasia-newsletter-russian.html
In outlook, especially Outlook 2013, you have to specify any table data (<td>) which has heigh lower than 12px by: style="font-size: 1px; line-height: 1px;". For example:
<td height="1" bgcolor="#000000" style="font-size: 1px; line-height: 1px;"> </td>
Instead of trying to debug, I'll offer you a simplified and stable framework to use instead. As you can see, you don't need a lot of the extra stuff you have in your code, particularly the nested tables and <tbody> tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
table td {border-collapse: collapse;}
</style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#f1f1f1" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="150">
LOGO
</td>
<td width="450" style="padding:20px;">
HEADER TEXT
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="150" valign="bottom">
COLUMN
</td>
<td width="450" style="padding:20px;">
BODY<br>
...<br>
...<br>
...<br>
...<br>
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
Related
I have made an email signature for a client which works perfectly on everything except Gmail. When I try to use the signature in Gmail it somehow centers it. This is only on the browser version. When I view the signature in the mail app on the iPhone it looks good. When I send the signature to Gmail from, for example, Outlook it looks good too. A screenshot of the problem: click .
I have no idea why this happens so I hope someone here has the answer for me. My code:
<!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 charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-column layout</title>
</head>
<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;
}
/* 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. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
padding: 0 20px 0 20px!important;
}
}
</style>
<body style="padding:0; margin:0">
<!--
/*##############################################*/
3 column
/*##############################################*/
-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td align="left" style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<span style="text-align: left; color: #9C1C27;font-size: 14px; font-weight: bold">Voornaam en Achternaam</span><br>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #B5987F; font-weight: normal; font-style:italic; font-size: 12px;">Functie titel</span><br>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 10px; padding-right: 0px; width:100%; height:100%;">
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo">
</td>
</tr>
</tbody>
</table>
<div class="block">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="600" align="left" class="fluid-table">
<tr>
<!-- Start of first column -->
<td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br>
Lindenhoutseweg 69<br>
6545 AH Nijmegen <br>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!--[if mso]></td><td valign="top"><![endif]-->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br>
Industrieweg 2a<br>
7102 DZ Winterswijk<br>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!--[if mso]></td><td valign="top"><![endif]-->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<font>T:</font> 0031-024-3775233 <br>
F: 0031-024-3779316 <br>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl">sales#deleeuwhides.nl</a><br>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com">www.deleeuwhides.com</a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column --></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" style="margin-top:5px; margin-bottom:3px;" class="fluid-table">
<tr>
<td style="padding: 0 0 2px 0; height:1px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" class="fluid-table">
<tr>
<td valign="top"bgcolor="#9C1C27" style="height:30px; width:100%; background-color:#9C1C27;"><img style="display:block; margin:auto; padding:8px 0 0 0;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Thanks in advance!
Somehow I fixed this by starting to build the code line for line in a new .html document. Testing it every time in Gmail until the centering would occur again, but it never did. So now it is working like it should!
Have you tried float left in your outer table which has a class of fluid-table?
If that doesn't fix it, give the below a shot and let me know if it works.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width:100%; max-width:600px;">[signature content here]</td>
<td> </td>
</tr>
</tbody>
</table>
I have created a table with two columns, first column has max width of 600px and the second doesn't have a width. Place all the content into the first column. I have placed the style inline, you can move it to a class if you want to.
Cheers
I had the same issue and solved it by applying "margin:0 !important" to the signature main container.
I have two side by side table cells which stack when triggered by a media query for a HTML newsletter. I want the headlines "Be Ready" and "Stay Organized" to left align when the responsive code fires but the "margin: 0px auto" causes all of the content to center. Is there a way to get these to stay left aligned? If I move them out of the table data cell from the rest of the content, everything messes up.
The "Stay Organized" and "Be Ready" headlines are centered when the code is responsive. I need them left aligned instead.
This is what it's supposed to look like on mobile: http://imgur.com/vT3XhJ6
Any help is appreciated.
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
table td {border-collapse:collapse;}
table[class=tblPreHeaderLinks] {
width: 100% !important;
height: 25px !important;
clear: both !important;
float: none !important;
}
.appleLinks2 a {
color:#333333 !important;
text-decoration: none !important;
}
/* CLIENT-SPECIFIC STYLES */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .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 */
body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
/* iOS BLUE LINKS */
.appleBody a {color:#68440a; text-decoration: none;}
.appleFooter a {color:#999999; text-decoration: none;}
/* MOBILE STYLES */
#media screen and (max-width: 525px) {
body[yahoo] .block_td {display: block;}
.appleLinks2 a {
color:#545861 !important;
text-decoration: none !important;
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
div[class="mobilecontent"]{
display: block !important;
max-height: none !important;
}
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"]{
width:100% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"]{
display:none;}
img[class="mobile-hide"]{
display: none !important;
}
img[class="img-max"]{
max-width: 100% !important;
width: 100% !important;
height:auto !important;
}
a.learnMore {
display: block;
text-align: center;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="section-padding"]{
padding: 10px 15px 5px 15px !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"]{
width:100%!important;
}
td[class="weatherTEXT"]{
font-size: 23px !important;
line-height: 27px !important;
}
td[class="weatherTEXT2"]{
font-size: 17px !important;
line-height: 21px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin: 0; padding: 0;" bgcolor="#f6f4f5">
<style type="text/css">
body { width: 100% !important; }
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper" style="border:1px solid #e2e0e0;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5">
<tr>
<td align="center">
<!--BODY-->
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5" align="center">
<tbody><tr>
<td width="640" align="center" bgcolor="#ffffff" class="section-padding" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td bgcolor="#ffffff" align="center" style="padding: 5px 0px 5px 0px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="640" class="responsive-table" align="center">
<tbody>
<tr><!--MOVABLE INK-->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#ffffff" align="center">
<tbody><tr>
<td style="padding: 15px 15px 5px 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="290" class="block_td" style="margin:0px auto;">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td align="left" style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Be Ready.</b>
</td>
</tr>
<td rowspan="3" valign="top" width="57" style="padding-right:10px;;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Phone-35x73.jpg" width="35" height="73" alt="House getting hit by a fallen tree" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Download our app:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td style="valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Take pictures of damage</td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Submit your claim</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding-top:2px;padding-bottom:35px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" alt="House getting hit by a fallen tree">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-right:35px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="290" class="block_td" style="margin:auto;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Stay Organized.</b>
</td>
</tr>
<tr>
<td rowspan="3" valign="top" width="60" style="padding-right:10px;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Icon-Devices-50x50.jpg" alt="" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Visit eService today:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;"><span class="appleLinks2">24/7 access</span></td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Manage your policy online</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:2px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-70x19.jpg">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-top: 30px; padding-right:40px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<a href="https://www.libertymutual.com/home-insurance/home-coverages-and-benefits/home-insurance-benefits/property-replacement-service?MM_webID=%%WebID%%"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-139x38.jpg" width="139" height="38" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 15px 15px 20px 15px;" class="tdLine">
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="tblLine">
<tr>
<td style="line-height:1px; font-size:1px; background-color:#f6f4f5" class="tdLineActual"> </td>
</tr>
</table> <!-- tblLine -->
</td> <!-- tdLine -->
</tr>
</tbody></table>
</td>
</tr><!--END OF MOVABLE INK-->
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><!--END OF BODY-->
</td>
</tr>
</table>
</td>
</tr>
</table><!--END OF CONTAINER-->
</body>
</html>
However i dont recommend to use nested tables but for your structure added one more table for desired results: demo
<table width="80%" border="0" align="center" cellspacing="0" cellpadding="0">
Getting a ton of white space at the end of my HTML email.
obviously, outlook is the worst? Any help? Attached is the code & a screen shot.
http://danielmdesigns.com/test/Screen%20Shot%202014-12-09%20at%205.59.55%20PM.png
http://codepen.io/dwmaldonado/full/Byjbao
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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>eCommission - Get your Golden Ticket Today!</title> <style type="text/css"></style> <style type="text/css"> /* CLIENT-SPECIFIC STYLES */
#outlook a { padding:0; } .ReadMsgBody { width:100%; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } body, table, td, a {
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } img {
-ms-interpolation-mode:bicubic; }
/* RESET STYLES */ body { height:100% !important; margin:0; padding:0; width:100% !important; } img { border:0; height:auto; line-height:100%; outline:none; text-decoration:none; } table { border-collapse:collapse !important; }
/* iOS BLUE LINKS */ .apple-link a { color:#999999 !important; text-decoration: none !important; } </style> </head>
<body>
<table border="0" cellpadding="20" cellspacing="0" border-collapse="collapse" width="100%" height="1000" bgcolor="#ededed">
<tr style="page-break-before: always">
<td>
<!-- Header Logo & Image -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3" height="200">
<img border="0" src="https://echo3.bluehornet.com/cimages/056f203db71e325409aa569351f79757/eCommission_GoldenTicketHeader.png" alt="eCommission - This Golden Ticket gets you your commissions before closing" style="display:block;">
</td>
</tr>
<!-- Content -->
<tr>
<td width="600" style="margin:100px; margin-left:100px; margin-right:100px; padding:10px; font-family:arial; font-size:12px; line-height:22px;">
<p style="margin:30px 30px;">There is nothing better than spending the holidays knowing your business has access to cash at any time. A commission advance from <b>eCommission</b> lets you control when you get paid, by advancing your commissions from pending sales and active listings whenever you want them.</p>
<p style="margin:30px 30px;">Using <b>eCommission</b> is fast, easy, and confidential:
<br>
• Apply on-line in minutes <br>
• Request up to $15,000 <br>
• Receive and sign your documents electronically <br>
• Have your funds wired in 1 business day <br>
• No Credit Check <br> </p>
<p style="margin:30px 30px;"> <b><span style="color:#ff8d06;">*Special Holiday Offer*</span></b> New customers get <b><span style="color:#ff8d06;">50%</span></b> off the advance fee, an average savings of $350!* Code will automatically apply on your first transaction.</p>
<p style="margin:30px 30px;"> Get started today at eCommission.com or call toll free at 877-882-4368.</p>
</td>
</tr>
</table>
<!-- Button -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="200"></td>
<td align="center" width="200" height="50" bgcolor="#ff8d06" font-color="#ffffff" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;"><span style="color:#ffffff;">Get Started</span></td>
<td width="200"></td>
</tr>
</table>
<!-- Disclaimer Information -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td style="padding:20px 10px 20px 10px; font-family:arial; font-size:9px; line-height:12px; color:#808080;"><i>*Savings of $350 based on a commission advance of $4,000 closing within 40 days. Certain underwriting restrictions apply. Hurry, offer expires December 31, 2014. Copyright 2014 eCommission Financial Services, Inc. 11612 Bee Caves Rd. Bldg. 2, Suite 200, Austin, Texas 78738</i></td>
</tr>
</table>
<!-- Footer Logos -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="2%"></td>
<td width="25%"><img border="0" src="https://echo3.bluehornet.com/cimages/056f203db71e325409aa569351f79757/logo_bbb.gif" alt="BBB A+ Acredited Business" style="display:block;"></td>
<td width="25%"><img border="0" src="https://echo3.bluehornet.com/cimages/056f203db71e325409aa569351f79757/logo_verify.png" alt="Verified & Secured, Verify Security" style="display:block;"></td>
<td width="48%"></td>
</tr>
</table>
</td>
</tr>
</table>
</body> </html>
Any help is greatly appreciated!
After much research, I found that the issue was actually because of the email test service i am using. they provide additional white space within their screen shots to make sure the full length of the email is captured. This is a limitation of the email capturing process, and not an issue with my email =)
I'm coding a responsive email, and I'm running onto some troubles with the behavior of some its tables. Please check the attached picture, for the desired effect.
https://dl.dropboxusercontent.com/u/58655025/mail_scenario.jpg
(left: "normal" behavior; right: responsive behavior, when the view width is <= 320px)
I'm not exactly sure of how many elements these blocks (both rectangular and the square ones; number of block elements and contents are dynamic) will have in total, so I want to keep the HTML as dynamic as possible. So, every time a new element is added to each block, it's placed at the right of the previous one and when they cannot fit on that line (due to email's max-width of 620px), I'd like for them to continue below.
And that's the part I'm not able to do. Instead of breaking below, the elements keep growing in the same line, ignoring the email's max-width property.
I'd like for the implementation to be table-based only, in order to guarantee the maximum email-client support as possible.
What can I do to achieve this? Any other suggestion?
Please, check this fiddle for a live example: http://jsfiddle.net/afe33fhv/
Or the HTML code, as required:
<!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>Title</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body {width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; color:#756d85; font-family:Helvetica, Arial, sans-serif;}
body.outlook img { width: auto !important; max-width: none !important;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
.backgroundTable {margin:0; padding:0; width:100% !important; line-height:100% !important;}
img {outline:none; text-decoration:none; border:none; -ms-interpolation-mode:bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a {color: #756d85;text-decoration: none;text-decoration:none!important;}
table[class=full] { width: 100%; clear:both; }
/*IPAD STYLES*/
#media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
table[class=devicewidth] {width:440px !important; text-align:center !important;}
table[class=devicewidthinner] {width:420px !important; text-align:center !important;}
table[class=devicewidthsocial] {width:200px! important; text-align:center !important;}
img[class=banner] {width:440px !important; height:220px !important;}
img[class=colimg2] {width:440px !important; height:220px !important;}
}
/*IPHONE STYLES*/
#media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
table[class=devicewidth] {width:300px !important; text-align:center !important;}
table[class=devicewidthinner] {width:260px !important; text-align:center !important;}
table[class=devicewidthsocial] {width: 200px!important; text-align:center !important;}
img[class=banner] {width: 280px!important; height:140px!important;}
img[class=colimg2] {width: 280px!important; height:140px!important;}
td[class=mobile-hide]{display:none !important;}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<!-- | Horizontal blocks | -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2">
<tbody>
<tr>
<!-- Element 1 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#7c84ca">
<tbody>
<tr><td width="100%">1</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 2 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#bdaabf">
<tbody>
<tr><td width="100%">2</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 3 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d26ec1">
<tbody>
<tr><td width="100%">3</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 4 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d85c79">
<tbody>
<tr><td width="100%">4</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- | Square blocks | -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2">
<tbody>
<tr>
<!-- Element 1 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8eb7c2">
<tbody>
<tr><td>1</td></tr>
</tbody>
</table>
</td>
<!-- Element 2 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8ec296">
<tbody>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
<!-- Element 3 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#636a34">
<tbody>
<tr><td>3</td></tr>
</tbody>
</table>
</td>
<!-- Element 4 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#c17b01">
<tbody>
<tr><td>4</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
You probably want to scrap the tables. Set all the blocks to display: inline-block; and they will automatically wrap around to the next line if the parent container hasn't got enough width left.
By using media queries, you can make sure the boxes parent container can only take on certain widths, creating your desired effect.
Here is a jsfiddle demonstrating: http://jsfiddle.net/spkzj05b/2/
Here is a list of css features supported in popular email clients: https://www.campaignmonitor.com/css/
Here is a tool to test the rendering in different email clients: https://litmus.com/email-testing
I have created an html file that I converted into a outlook template file. My template has a solid blue background color that is defined by setting the bgcolor attribute on the body tag. When I send this to users everything is great until they reply using Outlook 2010 or 2013. When they reply the blue background color is present in their response. How can I write my css to only fill the background on the initial email, not the reply?
<body bgcolor="#0a3353">
<!-- Content tables -->
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#0a3353">
<tr>
<td>
<table class="container" bgcolor="#ffffff" width="70%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="container" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
I also noticed this behavior does not occur when using Outlook 2011 for mac.
You need a 100% width table in there instead of applying the background color to the body tag.
Here are the 2 setups I use that take control the forwarding background color (#FFFFFF), while setting the html section background (#252525).
Fixed Width Email:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="white">
<tr>
<td style="padding:30px;">
Content
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
Fluid Email:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
#media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;">
<tr>
<td align="left" style="padding:30px;">
Content
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>