I'm coding an email, and the hero image is misaligned slightly and only in Outlook.
I've seen and tried some answers to this question already (Setting the font size to 0, removing the "margin", adding another table just for the image), but all of the answers were several years old. I think there's a new update in Outlook that is causing this issue.
My code is here:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
}
</style>
<![endif]-->
</head>
<body style="background-color:#eeeeee; Margin:0; padding:0; min-width:100%;">
<style type="text/css">
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
*[class=mobile]{display:none;}
#media only screen and (max-width:650px) {
*[class=desktop]{display:none !important;
background:none!important;}
}
#media only screen and (max-width: 649px) {
*[class="column"],
*[class="two-column"] {
width: 100%!important;
max-width: 649px!important;
}
*[class="rightrail"] {
max-width: 100%!important;
}
*[class="rightrail"] img {
width: 100%!important;
}
*[class="nomobile"] {
overflow: hidden !important;
float: none !important;
display: none !important;
line-height:0% !important;
}
}
#media only screen and (max-width: 500px) {
[class*=wrapper] .app {
width: 70%!important;
}
[class*=wrapper] .app-text span {
font-size:15px!important;
font-weight:bold;
}
[class*=wrapper] .app-text span span {
font-size:7px!important;
font-weight:bold;
}
*[class=desktop]{
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
text-align: center;!Important;
}
div[class=desktop]{
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
margin: 0 auto!important;
text-align:center!important;
}
*[class="mobileonly"] {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
}
*[class=desktop] table {
display: inline-block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
width: 100%!important;
text-align: center!Important;
margin: 0 auto;
max-width: 140px!important;
}
*[class="padding"] {
padding: 0 5% !important;
}
*[class=desktop] a {
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
padding: 8px 20px!important;
}
*[class="column"],
*[class="two-column"] {
width: 90%!important;
}
}
</style>
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; background-color: #eeeeee">
<br class="nomobile">
<!--Pre Header-->
<div class="header" style="max-width:650px;">
<!--[if (gte mso 9)|(IE)]>
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px;">
<tr>
<td style="width: 100%; text-align:center; font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
<tr>
<td width="25"> </td>
<td width="600" valign="top">
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="25"> </td></tr></table>
<![endif]--></td>
</tr>
</table>
</div>
<!--Header-->
<div class="header" style="max-width:650px;">
<!--[if (gte mso 9)|(IE)]>
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px; background-color: #0079c2;">
<tr>
<td style="width: 100%; text-align:center; font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
<tr>
<td width="25"> </td>
<td width="600" valign="top">
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<div style="width:90%; display:inline-block; vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;" >
<tr>
<td width="100%" class="inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0; padding: 0; margin: 0" >
<tr>
<td width="100%" class="inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0; padding: 0; margin: 0" >
<tr>
<td width="30%" align="left"><img src="http://image.bcbst-email.com/lib/fe9612717c60077f75/m/1/logo-white_2.png" alt="BlueCross BlueShield of Tn" width="134" height="55" border="0" style="display: block; max-width: 134px; color: #ffffff; background: #0079C2; font-size:9px;"/></td>
<td width="55%" align="right"><p style="font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color:#ffffff; mso-line-height-rule:exactly; line-height: 12px;">View Online</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="25"> </td></tr></table>
<![endif]--></td>
</tr>
</table>
</div>
<!--Header-->
<!--Hero Image-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; width: 100%; max-width:650px!important; padding: 0 auto;">
<tr>
<td><img src="http://image.bcbst-email.com/lib/fe9612717c60077f75/m/1/Health+Foundation+Header+V2.jpg" style="width:100%; display:block; max-width: 650; color: #0079C2; font-weight:bold; background: #ffffff; font-size:14px;" alt="A New Focus for our Health Foundation" border="0" width="100%" class="hero"></td>
</tr>
</table>
<!--Hero Image-->
I have this CSS Cheatsheet that will reset most of the styles across different email providers, add it before any of your styles
/* Client-specific Styles */
#outlook a {
padding: 0;
}
/* Force Outlook to obtain 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.*/
#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;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table td {
border-collapse: collapse;
}
.removemobile {
display: none;
}
/*STYLES*/
/*################################################*/
/*IPAD STYLES*/
/*################################################*/
#media only screen and (max-width: 612px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #ffffff;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
td[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
table[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
td[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
table[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="logo"] {
width: 100%!important;
float: left;
text-align: center;
margin-bottom: 20px;
}
td[class="menu"] {
width: 100%!important;
float: left;
}
table[class=fullspread] {
width: 100%!important;
clear: both;
}
table[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="buttoncenter"] {
float: none!important;
text-align: center!important;
display: inline-block!important;
clear: both;
}
img[class="imageinline"] {
display: inline!important;
}
img[class="fullwidth"] {
display: inline!important;
width: 100%!important;
}
td[class="paddingtop"] {
padding-top: 15px!important;
}
.buttonleft {
display: inherit!important;
}
.removemobile {
width: 100%!important;
display: block;
}
table[class="halfwidth"] {
width: 50%!important;
}
table[class="mghide"] {
display: none!important;
}
td[class="mghide"] {
display: none!important;
}
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #ffffff;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
td[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
table[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
td[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
table[class=fullspread] {
width: 100%!important;
clear: both;
}
table[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
table[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="logo"] {
width: 100%!important;
float: left;
text-align: center;
margin-bottom: 20px;
}
td[class="menu"] {
width: 100%!important;
float: left;
}
td[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="buttoncenter"] {
float: none!important;
text-align: center!important;
display: inline-block!important;
clear: both;
}
img[class="imageinline"] {
display: inline!important;
}
img[class="fullwidth"] {
display: inline!important;
width: 100%!important;
}
td[class="paddingtop"] {
padding-top: 15px!important;
}
.buttonleft {
display: inherit!important;
}
.removemobile {
width: 100%!important;
display: block;
}
table[class="halfwidth"] {
width: 50%!important;
}
table[class="mghide"] {
display: none!important;
}
td[class="mghide"] {
display: none!important;
}
}
</style>
Related
So I am creating an email template, i have included a table inside, but as you can see from the code when it displays, it doesnt shows table border. I want to have the normal single line table border. I have tried adding in "class="table table-bordered" but it still doesnt show me the border. How can i solve this?
<!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>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
img {
max-width: 100%;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.align-center {
text-align: center;
}
#cta1 a {
text-decoration: none !important;
color: #FFFFFF !important;
}
.no-spacing {
padding:0px;
margin: 0px;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
table[class="body"] .columns td.one {
width: 8.333333% !important;
}
table[class="body"] .column td.one {
width: 8.333333% !important;
}
table[class="body"] .columns td.two {
width: 16.666666% !important;
}
table[class="body"] .column td.two {
width: 16.666666% !important;
}
table[class="body"] .columns td.three {
width: 25% !important;
}
table[class="body"] .column td.three {
width: 25% !important;
}
table[class="body"] .columns td.four {
width: 33.333333% !important;
}
table[class="body"] .column td.four {
width: 33.333333% !important;
}
table[class="body"] .columns td.five {
width: 41.666666% !important;
}
table[class="body"] .column td.five {
width: 41.666666% !important;
}
table[class="body"] .columns td.six {
width: 50%;
}
table[class="body"] .column td.six {
width: 50%;
}
table[class="body"] .columns td.seven {
width: 58.333333% !important;
}
table[class="body"] .column td.seven {
width: 58.333333% !important;
}
table[class="body"] .columns td.eight {
width: 66.666666% !important;
}
table[class="body"] .column td.eight {
width: 66.666666% !important;
}
table[class="body"] .columns td.nine {
width: 75% !important;
}
table[class="body"] .column td.nine {
width: 75% !important;
}
table[class="body"] .columns td.ten {
width: 83.333333% !important;
}
table[class="body"] .column td.ten {
width: 83.333333% !important;
}
table[class="body"] .columns td.eleven {
width: 91.666666% !important;
}
table[class="body"] .column td.eleven {
width: 91.666666% !important;
}
table[class="body"] .columns td.twelve {
width: 100% !important;
}
table[class="body"] .column td.twelve {
width: 100% !important;
}
table[class="body"] .columns td {
padding-top: 10px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-top-10 {
padding-top: 10px;
}
.mobile-center {
text-align: left !important;
}
#media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block;
}
.mobile-center {
text-align: left !important;
}
.center-mobile {
text-align: center;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
table[class="body"] table.column td .list {
width: auto !important;
}
table[class="body"] img {
width: auto !important;
height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
table[class="body"] .container {
width: 100% !important;
}
table[class="body"] .row {
width: 100% !important;
display: block !important;
}
table[class="body"] .wrapper {
display: block !important;
padding-right: 0 !important;
}
table[class="body"] .columns {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .column {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .wrapper.first .columns {
display: table !important;
}
table[class="body"] .wrapper.first .column {
display: table !important;
}
table[class="body"] table.columns td {
width: 100% !important;
}
table[class="body"] table.column td {
width: 100% !important;
}
table[class="body"] .columns td {
width: 100% !important;
display: block;
}
table[class="body"] .column td {
width: 100% !important;
display: block;
}
table[class="body"] td.offset-by-one {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-two {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-three {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-four {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-five {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-six {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-seven {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eight {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-nine {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-ten {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eleven {
padding-left: 0 !important;
}
table[class="body"] table.columns td.expander {
width: 1px !important;
}
table[class="body"] .right-text-pad {
padding-left: 10px !important;
}
table[class="body"] .text-pad-right {
padding-left: 10px !important;
}
table[class="body"] .left-text-pad {
padding-right: 10px !important;
}
table[class="body"] .text-pad-left {
padding-right: 10px !important;
}
table[class="body"] .hide-for-small {
display: none !important;
}
table[class="body"] .show-for-desktop {
display: none !important;
}
table[class="body"] .show-for-small {
display: inherit !important;
}
table[class="body"] .hide-for-desktop {
display: inherit !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; margin:0; padding:0; background:#eeeeee; ">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; margin:0; padding:0; ">
<center style="width:100%; min-width:600px; ">
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0;" align="left" bgcolor="#353937">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<p class="no-spacing" style="margin: 30px;"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major-Infrastructure-Issue_Email-Template_Logo.png" alt="eO Logo.png" constrain="true" imagepreview="false" style="max-width: 600px;" /></p>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simple" mktoname="content-intro-simple">
<td style="padding: 20px 40px 10px 40px">
<div class="mktEditable" id="heading-simple" style="" mktoname="heading-simple">
<p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Customer Action Required.png" /> <br /> <br /></p>
<h4 style="color: #2ea049; font-size: 18px; line-height: 100%; margin: 0; padding: 0;">Upcoming Security Changes</h4>
<div>
<br />
</div>
<p><b>Customer Name,</b></p>
<p>We are committed to ensuring the highest level of security standards for your most valuable digital assets. This email is requesting your partnership on some important security initiatives.</p>
</div> </td>
</tr>
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" mktoname="content-intro-simple-clone">
<td style="padding: 20px 40px; background-color:#EFF2F2">
<table style="width:100%; background-color:white">
<tbody>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_What.png" /></td>
<td style="width:70%; padding: 15px;">eOriginal is upgrading both our password acceptance criteria and the connection types our solution supports.</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_When.png" /></td>
<td style="width:70%;padding: 15px;">Upgrades take effect <span style="color: orange"><strong>March 29th</strong></span> for Preview on Demand, <span style="color: orange"><strong>April 26th</strong></span> for Test on Demand, and <span style="color: orange"><strong>April 28th</strong></span> for Production on Demand.</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_Action Required_orange.png" /></td>
<td style="width:70%; padding: 15px;"><span style="color: black"><strong>Ensure your Financial Assets are Safe with Enhanced Password Requirements</strong></span><br />We are requesting all customers ensure their passwords have a minimum length of 8 characters, 1 upper case letter, 1 lower case letter, 1 number, and 1 special character. This applies across both user and API-based sessions.<br /><br /><span style="color: black"><strong>Keep Sensitive Data Exchanged between eOriginal’s Platform, Users, and External Systems Private with Strong Encrypted Connections</strong></span><br />Please ensure that your access to eOriginal’s solution, whether through a browser or API, uses TLS 1.2 with a strong cipher suite (detailed in the attached document).</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_Why.png" /></td>
<td style="width:70%;padding: 15px;">These actions provide greater protection from brute force attacks and keep the communication between eOriginal’s solution, your external systems, and user browser sessions secure.</td>
</tr>
</tbody>
</table> </td>
</tr>
<!-- <tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" mktoname="content-intro-simple-clone">
<td style="padding: 20px 40px 20px 40px; background-color:#EFF2F2">
<div class="mktEditable" id="heading-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" style="" mktoname="heading-simple">
<div>
<br />
</div>
<p style="color: #2ea049; font-size: 16px; line-height: 120%; margin: 0; padding: 0;"><strong>Ensure your Financial Assets are Safe with Enhanced Password Requirements</strong></p>
<p>All customers will be required to comply with a minimum password policy of 8 characters, 1 upper case letter, 1 lower case letter, 1 number, and 1 special character. This will be required across user and API-based sessions.</p>
<br />
<p style="color: #2ea049; font-size: 16px; line-height: 120%; margin: 0; padding: 0;"><strong>Keep Sensitive Data Exchanged between eOriginal’s Platform, Users, and External Systems Private with Strong Encrypted Connections</strong></p>
<p>Any access to eOriginal’s solution, whether through a browser or API, will be required to use TLS 1.2 with a strong cypher suite (detailed in the attached document).</p>
</div> </td>
</tr> -->
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29cfe45834-9b29-425f-b7e2-ee12f4678d5d" mktoname="content-intro-simple-clone-clone">
<td style="padding: 10px 40px 20px 40px">
<div class="mktEditable" id="heading-simpled47b52d3-01b4-4053-9a68-431c4cec6c29cfe45834-9b29-425f-b7e2-ee12f4678d5d" style="" mktoname="heading-simple">
<p>Full details on these and other upcoming requirements can be found in the attached document. Should you have any questions or concerns, please feel free to contact our support team and they will route you to the most appropriate resource.</p>
<div>
We look forward to partnering with you on these important security initiatives.
</div>
<div></div>
<p>Thank you,</p>
<p><b>Val Daly</b> <br />VP, Customer Services<br />support#eoriginal.com</p>
</div> </td>
</tr>
<tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 12px; color: #FFFFFF; padding: 20px 40px;"> eOriginal.com </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2019 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html>
Add below style to your css
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}
Below is the screenshot of the output I get from the above css.
For more information on border for html table, check this link https://www.quackit.com/html/codes/tables/html_table_border.cfm
Below is the updated code
.table-bordered {
border-collapse: collapse;
}
.“table-bordered” tr, .“table-bordered” td {
border: 1px solid red;
border-collapse: collapse;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
p {margin: 1em 0;}
#-ms-viewport{ width: device-width;}
#media only screen and (max-width: 300PX) {
body[yahoo] .container { width:100% !important; }
body[yahoo] .footer { width:auto !important; margin-left:0; }
body[yahoo] .content-padding{ padding:4px !important; }
body[yahoo] .mobile-hidden { display:none !important; }
body[yahoo] .logo { display:block !important; padding:0 !important; }
body[yahoo] img { max-width:100% !important; height:auto !important; max-height:auto !important;}
body[yahoo] .header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
body[yahoo] .photo img { width:100% !important; max-width:100% !important; height:auto !important;}
body[yahoo] .drop { display:block !important; width: 100% !important; float:left; clear:both;}
body[yahoo] .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
body[yahoo] .nav4, body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important; }
body[yahoo] .tableBlock {width:100% !important;}
body[yahoo] .responsive-td {width:100% !important; float:left !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;}
h1 { font-size: 22px !important; line-height: normal !important;}
h2 { font-size: 20px !important; line-height: normal !important;}
h3 { font-size: 18px !important; line-height: normal !important;}
.buttonstyles {
font-family:arial,helvetica,sans-serif !important;
font-size: 16px !important;
color: #FFFFFF !important;
padding: 10px !important;
}
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
}
#media only screen and (max-width: 640px) {
body[yahoo] .container { width:100% !important; }
body[yahoo] .mobile-hidden { display:none !important; }
body[yahoo] .logo { display:block !important; padding:0 !important; }
body[yahoo] .photo img { width:100% !important; height:auto !important;}
body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style><!--[if mso]> <style type="text/css"> /* Begin Outlook Font Fix */ body, table, td { font-family: Arial, Helvetica, sans-serif ; font-size:16px; color:#808080; line-height:1; } /* End Outlook Font Fix */ </style> <![endif]--></head><body bgcolor="#ffffff" text="#000000" style="background-color: #FFFFFF; color: #000000; margin: 0px; padding: 0px; -webkit-text-size-adjust:none;" yahoo="fix"><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td align="center" valign="top"><div style="margin:18px 0;">
<!-- END Table use to set width of email --></div>
<!--End Navi Bar-->
</td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding-top: 10px;padding-right: 10px;padding-left: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>
<img data-assetid="31498" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0dbebd2d-e383-4fb3-b7d2-775d5e3b437c.jpg" height="337" width="256" style="height:337px;width:256px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></table></td></tr></table></td>
<td class="responsive-td" valign="top" style="width: 50%; padding-left: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
#media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
#media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_eggo.jpg" alt="" width="128" height="168" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_motts.jpg" alt="" width="128" height="168" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_honey_nut_cheerios.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
#media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
#media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_progresso.jpg" alt="" width="128" height="168" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="168" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_metamucil.jpg" alt="" width="128" height="168" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_green_giant_beans.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
#media only screen and (max-width: 400px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
#media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Holderolay.jpg" alt="" width="120" height="120" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Mission.jpg" alt="" width="120" height="120" border="0" class=""></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/ReddyWhip.jpg" alt="" width="120" height="120" border="0" class=""></td>
<td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/images.jpg" alt="" width="120" height="120" border="0" class=""></td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Kraft.jpg" alt="" width="120" height="120" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
#media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
#media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0" class="pattern" width="100%"><tbody><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
2
</td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
3
</td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
2
</td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
3
</td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%; padding-left: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td><img data-assetid="31510" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/89c228aa-d401-4f79-ba4b-1f76b230b360.jpg" height="395" width="300" style="height:395px;width:300px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody>
</table></td></tr></tbody></table></td>
</tr></table></td></tr></table></td></tr><tr><td valign="top"><center><table cellpadding="2" cellspacing="0" width="600" ID="Table5"><tr><td> </body></html>
I just designed an email for a upcoming campaign however i'm having a tough time with it responding correctly to mobile devices. When I check it in Litmus it does not acknowledge any breakpoints pleaseeee help. I've attached the code below:
Three things stick out to me:
No. 1: You don't need brackets to define classes like this table[class="pattern"] anymore. table.pattern works in all email clients.
No. 2:
Why is almost everything prefixed with body[yahoo]? This targets Yahoo! Mail and won't be rendered anywhere else. If you have your media query code prefixed like this, it won't render in iOS Mail or Gmail App.
No. 3:
There are quite a few <style> tag blocks in the <body>. These won't be rendered by every email client, best to move them into the <head>.
I can not get the background images to work in Outlook HTML newsletter. I tried bulletproof method, but it is not working as it supposed to be!
Please check out my code to see if you have any ideas how to display 3 different background images correctly in Outlook. This is what I have at the moment (and it works flawlessly everywhere but Outlook)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>E-mail newsletter</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport">
<style type="text/css">
/* Reset */
body { margin: 0px; padding: 0px; background-color: #FFFFFF; }
::selection {
background: #ff2f2f; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ff2f2f; /* Gecko Browsers */
}
/* Responsive */
#media only screen and (max-width:600px) {
/* Tables
parameters: width, alignment, padding */
table[class=scale] { width: 100%!important; }
table[class=scale-300] { width: 100%!important; height: 300px!important; }
table[class=scale-90] { width: 90%!important; }
/* Td */
td[class=hide] { display: none!important; height: 0px!important; }
td[class=scale-left] { width: 100%!important; text-align: left!important;}
td[class=scale-height] { height: 70px!important;}
td[class=scale-left-bottom] { width: 100%!important; text-align: left!important; padding-bottom: 24px!important; }
td[class=scale-left-top] { width: 100%!important; text-align: left!important; padding-top: 24px!important; }
td[class=scale-left-all] { width: 100%!important; text-align: left!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center] { width: 100%!important; text-align: center!important;}
td[class=scale-center-both] { width: 100%!important; text-align: center!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-bottom] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; }
td[class=scale-center-top] { width: 100%!important; text-align: center!important; padding-top: 24px!important; }
td[class=scale-center-all] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-right] { width: 100%!important; text-align: right!important;}
td[class=scale-right-bottom] { width: 100%!important; text-align: right!important; padding-bottom: 24px!important; }
td[class=scale-right-top] { width: 100%!important; text-align: right!important; padding-top: 24px!important; }
td[class=scale-right-all] { width: 100%!important; text-align: right!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center-bottom-both] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-top-both] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=reset] { height: 0px!important; }
td[class=scale-center-topextra] { width: 100%!important; text-align: center!important; padding-top: 84px!important; }
img[class="reset"] { display: inline!important; }
img[class="scale-80"] { width: 80%!important; }
}
</style>
</head>
<body>
<table class="scale" data-bgcolor="Body BG" data-module="Header" style="background-color: rgb(255, 255, 255); position: relative; opacity: 1; top: 0px; left: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="color:#444444; font-family:Helvetica, Verdana, Arial, sans-serif; font-size:13px; padding:50px 0px 20px 0;">
Can't see the offer? Click here! </td>
</tr>
<tr>
<td>
<table class="scale" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-image: url("http://s30.postimg.org/s36pgisoh/bg1.jpg");" data-bg="Quote BG" align="center" height="340" background="http://s30.postimg.org/s36pgisoh/bg1.jpg" border="0" cellpadding="0" cellspacing="0" width="620">
<tr>
<td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s10.postimg.org/u2e99laih/cut_top.png">
</td>
</tr>
<tr>
<td align="center">
<table class="scale" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tr>
<td height="50">
</td>
</tr>
<tr>
<td data-color="Header Headline" data-max="64" data-min="16" data-size="Header Headline" style="font-family: "Proxima N W01 At Smbd",Helvetica,Arial,sans-serif; font-size: 29px; color: rgb(255, 255, 255); line-height: 42.05px;" align="center">BEST OFFER HERE!<br><br><span data-color="Header Subline" data-max="50" data-min="16" data-size="Header Subline" style="font-size: 38px; line-height: 38px; color: rgb(255, 255, 255);">STARTS FROM <strong>35 EUR</strong>!</span>
</td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td style="color: rgb(255, 255, 255); font-size: 15px; line-height: 25.5px;" data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" align="center"><a data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" data-bgcolor="Header Button" href="http://webpage.com" style="background-color: rgb(219, 0, 19); border-radius: 40px; padding: 10px 30px; color: rgb(255, 255, 255); font-family: "Proxima N W01 At Smbd",Helvetica,Arial,sans-serif; text-decoration: none; font-size: 15px; line-height: 25.5px;">ORDER NOW <img src="http://s11.postimg.org/nk238dn6n/nool.png" height="10px" width="11px" alt=""></a>
</td>
</tr>
<tr>
<td height="50">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s27.postimg.org/f9g57wpgz/cut_down.png">
</td>
</td>
</tr>
</table></tr>
</table></body></html>
</body></html>
background-image is not supported in outlook, sorry for you.
Take a look here about css compatibility in email clients: https://www.campaignmonitor.com/css/
Using html and css in email it's very very difficult.
Every single email client reading your email is going to have it's own rules about how it deals with HTML emails, so you are going to have to design for the lowest common denominator.
Excuse my newbie coding because it's a Frankenstein mix of hundreds of email layouts, but can someone tell me why my table layout is not displaying the columned tables side-by-side?
It's the two td elements with the class name container-small at 50% width that won't position side-by-side. I'm not using float or divs.
Is it because they're separate tables when they should be part of the same td? Please feel free to make other amendments/suggestions so I can improve my layout. The left column must be 283px exactly, but the right column can be 100% fluid. That's really the only requirement.
<!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"/>
<style type="text/css">
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
the problem is here:
.container-small {
display: block !important;
width: 100% !important;
}
just remove this two properties above.
Snippet below:
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
/* REMOVE HERE
.container-small {
display: block !important;
width: 100% !important;
}
*/
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
</center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
I have the following structure:
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile" style="margin: 0 auto;">
<tbody>
<tr>
<td width="100%">
<!-- Space -->
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
<tbody><tr>
<td width="100%" height="30"></td>
</tr>
</tbody></table><!-- End Space -->
<!-- Icon 1 -->
<table width="115" height="100" border="0" cellpadding="0" cellspacing="0" style="float: left; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align: center; margin: 0 auto; border-right: 1px solid #d7d7d7; background-color: red;" class="fullCenter setFloatNone">
<tbody>
<tr>
<td valign="middle" width="100%" mc:edit="m28" class="fullCenter">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="fullCenter" >
<tbody>
<tr>
<td width="100%" height="100" style="text-align: center;">
<img src="images/icon1.png" width="35" alt="" border="0" mc:edit="m06"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Icon 1 Text -->
<table width="365" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; background-color: blue;" class="fullCenter">
<tbody>
<tr width="100%">
<td valign="middle" width="100%" height="100" mc:edit="m28" class="fullCenter">
<p style="font-weight: 700; font-size: 20px; color: #000000; font-family: 'Open Sans', Arial, sans-serif; line-height: 23px; margin-top: 0px; margin-bottom: 5px;" class="font20 centeredP">
<font face="'Open Sans', Arial, sans-serif">text</font>
</p>
<p style="font-size: 16px; color: #474747; font-family: 'Open Sans', Arial, sans-serif; line-height: 24px; margin-top: 0px; margin-bottom: 0px;" class="font16 centeredP">
<font face="'Open Sans', Arial, sans-serif">more text here</font>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End Wrapper -->
<!-- Space -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody>
<tr>
<td width="100%" height="60"></td>
</tr>
</tbody>
</table><!-- End Space -->
<!-- END TEST -->
and my css:
<style type="text/css">
#media only screen and (max-width: 640px){
body{width:auto!important;}
td[class=showThreeRows] {padding-left: 80px !important; padding-right: 80px !important;}
table[class=full] {width: 100%; clear: both; }
table[class=mobile] {width: 100%; padding-left: 20px; padding-right: 20px; clear: both; }
table[class=fullCenter] {width: 100%; text-align: center !important; clear: both; }
td[class=fullCenter] {width: 100%; text-align: center !important; clear: both; }
td[class=fullCenter2] {width: 100%; text-align: center !important; clear: both; display: block; margin: 0 auto; }
td[class=fullCenter] p { width: 100%; text-align: center !important; clear: both; padding-left: 25px; padding-right: 25px; color: red;}
td[class=removePadding] { width: 100%; text-align: center !important; clear: both; padding: 0px !important; }
td[class=textCenter] {width: 100%; text-align: center !important; clear: both; }
table[class=headerScale] {width: 100%!important; text-align: center!important; clear: both; }
.headerScale img {width: 100%!important; height: auto;}
table[class=vidScale] {width: 100%!important; text-align: center!important; clear: both; }
.vidScale img {width: 100%!important; height: auto;}
.erase {display: none;}
table[class=screenLeft] {padding-right: 6px;}
table[class=screenRight] {padding-left: 6px;}
.font20 {font-size: 20px!important; line-height: 30px!important;}
table[class=w90] {width: 90%!important;}
table[class=icon] {width: 100%; text-align: center!important; clear: both; }
table[class=imageMobile] {width: 100%; clear: both;}
table[class=imageMobile] {width: 100%; clear: both;}
.imageMobile img {width: 80%!important; height:auto!important;}
.voucher1 {width: 100%!important; border-left: none!important; text-align: center!important;}
.fullOne {background-color: #efefef; height: 1px!important;}
.centeredP {text-align: center !important; color: red !important;}
<!--[if !IE]> -->
.font36 { font-size: 50px !important; line-height: 55px !important;}
.font30top { font-size: 66px !important; line-height: 69px !important;}
.font30 { font-size: 53px !important; line-height: 58px !important;}
.font20 { font-size: 40px !important; line-height: 45px !important; }
.font18 { font-size: 36px !important; line-height: 45px !important;}
.font16 { font-size: 27px !important; line-height: 34px !important;}
<!-- <![endif]-->
}
</style>
The issue is that the first table with the icon1.png renders all aligned to the left in my android (Nexus 4) instead of setting the table to 100% (like the 2nd table with the text) and aligning the icon to the middle.
Any ideas?
You have a css selector that selects table elements which have only the one class fullCenter an no other classes:
table[class=fullCenter] {
width: 100%;
text-align: center !important;
clear: both;
}
That is the reason why your <table ... class="fullCenter setFloatNone"> does not get selected. If you change your selector to
table.fullCenter {
width: 100%;
text-align: center !important;
clear: both;
}
you should be fine.