I'm setting up an html template for a client so having fun with tables, yay.
Responsiveness previews correctly in desktop browser, but when sent to an iphone, the td's are not scaling with the percentage applied, just defaulting to content size. The example I've supplied is for images (trying to setup a nav for the template), but also applies to text only as well.
The goal is a 600px centered content area with the background of the email a light gray. Under 600px, the nav cells should responsively scale to 25% of the viewport, but with text content the cells shrink to text size, and images they expand to image size.
Anyone know a way on iphones to set table cell widths as a percentage of the viewport?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">
<style>
.wrapper {
width: 100%;
text-align: center;
background-color: #ebebeb;
}
.container {
width: 600px;
max-width: 600px;
margin: auto;
}
.header {
background-color: #ffffff;
width: 100%;
}
#media (max-width: 600px) {
html, body, .wrapper, .container, .header, .wrapper-td, .container-td {
width: 100% !important;
max-width: 100% !important;
}
}
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td class="wrapper-td">
<table class="container">
<tr>
<td class="container-td">
<table class="header">
<tr>
<td style="width: 25%;">
<img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" />
</td>
<td style="width: 25%;">
<img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" />
</td>
<td style="width: 25%;">
<img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" />
</td>
<td style="width: 25%;">
<img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try to add html, body{margin:0; padding:0} to the style, and cellpadding="0" cellspacing="0" to all your tables.
Codepen: http://codepen.io/Bidstrup/pen/LVobpG
Related
How it shows in Gmail
How it shows in Yahoo
Accurate Design
I've been having a problem with an email not formatting correctly for some platforms. It seems to remove images and background colors in yahoo, and just messes everything up in Gmail. Apple it is perfectly fine.
I'm not super knowledgable in code, I can just make changes but not sure what exactly to add or change to be compatible with all platforms. I think it has to do with the way background colors and pictures are coded.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting">
<!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<!-- CSS Reset : BEGIN -->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style type="text/css">
html,body{
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
-ms-interpolation-mode:bicubic;
}
a{
text-decoration:none;
}
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.a6S{
display:none !important;
opacity:.01 !important;
}
.im{
color:inherit !important;
}
img.g-img+div{
display:none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px){
u ~ div .email-container{
min-width:320px !important;
}
} #media only screen and (min-device-width: 375px) and (max-device-width: 413px){
u ~ div .email-container{
min-width:375px !important;
}
} #media only screen and (min-device-width: 414px){
u ~ div .email-container{
min-width:414px !important;
}
} html,body{
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
-ms-interpolation-mode:bicubic;
}
a{
text-decoration:none;
}
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.a6S{
display:none !important;
opacity:.01 !important;
}
.im{
color:inherit !important;
}
img.g-img+div{
display:none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px){
u ~ div .email-container{
min-width:320px !important;
}
} #media only screen and (min-device-width: 375px) and (max-device-width: 413px){
u ~ div .email-container{
min-width:375px !important;
}
} #media only screen and (min-device-width: 414px){
u ~ div .email-container{
min-width:414px !important;
}
} .primary{
background:#f5564e;
}
.bg_white{
background:#ffffff;
}
.bg_light{
background:#fafafa;
}
.bg_black{
background:#000000;
}
.bg_dark{
background:rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding:12px 20px;
display:inline-block;
text-transform:uppercase;
letter-spacing:2px;
font-weight:600;
}
.btn.btn-primary{
border-radius:30px;
background:#36b1ce;
font-size:13px;
color:#ffffff;
}
.btn.btn-white{
border-radius:5px;
background:#ffffff;
color:#000000;
}
.btn.btn-white-outline{
border-radius:5px;
background:transparent;
border:1px solid #fff;
color:#fff;
}
h1,h2,h3,h4,h5,h6{
font-family:'Raleway',sans-serif;
color:#000000;
margin-top:0;
}
body{
font-family:'Raleway',sans-serif;
font-weight:400;
font-size:15px;
line-height:1.8;
color:rgba(0,0,0,.4);
}
a{
color:#f5564e;
}
.logo h1{
margin:0;
}
.logo h1 a{
color:#000;
font-size:20px;
font-weight:700;
text-transform:uppercase;
font-family:'Raleway',sans-serif;
}
.navigation{
padding:0;
}
.navigation li{
list-style:none;
display:inline-block;
margin-left:5px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}
.navigation li a{
color:rgba(0,0,0,.6);
}
.hero{
position:relative;
z-index:0;
}
.hero .overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
}
.hero .icon a{
display:block;
width:60px;
margin:0 auto;
}
.hero .text{
color:rgba(255,255,255,.8);
padding:0 4em;
}
.hero .text h2{
color:#ffffff;
font-size:40px;
margin-bottom:0;
line-height:1.2;
font-weight:300;
}
.heading-section h2{
color:#000000;
font-size:30px;
margin-top:0;
line-height:1.4;
font-weight:300;
}
.heading-section .subheading{
margin-bottom:20px !important;
display:inline-block;
font-size:13px;
text-transform:uppercase;
letter-spacing:2px;
color:rgba(0,0,0,.4);
position:relative;
}
.heading-section .subheading::after{
position:absolute;
left:0;
right:0;
bottom:-10px;
content:'';
width:100%;
height:2px;
background:#f5564e;
margin:0 auto;
}
.heading-section-white{
color:rgba(255,255,255,.8);
}
.heading-section-white h2{
line-height:1;
font-weight:300;
font-size:30px;
padding-bottom:0;
}
.heading-section-white h2{
color:#ffffff;
}
.heading-section-white .subheading{
margin-bottom:0;
display:inline-block;
font-size:30px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:300;
color:rgba(255,255,255,.4);
}
.icon{
text-align:center;
}
.services{
background:rgba(0,0,0,.03);
}
.text-services{
padding:20px 10px 0;
text-align:center;
background:#fafafa;
}
.text-services h4{
font-size:15px;
text-transform:uppercase;
letter-spacing:.5px;
color:#36b1ce;
font-weight:600;
}
.services-list{
padding:0;
margin:0 0 10px;
width:100%;
float:left;
}
.services-list .text{
width:100%;
float:right;
}
.services-list h3{
margin-top:0;
margin-bottom:0;
font-size:15px;
}
.services-list p{
margin:0;
}
.text-tour{
padding-top:10px;
}
.text-tour h3{
margin-bottom:0;
}
.text-tour h3 a{
color:#000;
}
.text-services .meta{
text-transform:uppercase;
font-size:14px;
}
.text-testimony .name{
margin:0;
}
.text-testimony .position{
color:rgba(0,0,0,.3);
}
.counter{
width:100%;
position:relative;
z-index:0;
}
.counter .overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
}
.counter-text{
text-align:center;
}
.counter-text .num{
display:block;
color:#ffffff;
font-size:34px;
font-weight:700;
}
.counter-text .name{
display:block;
color:rgba(255,255,255,.9);
font-size:13px;
}
ul.social{
padding:0;
}
ul.social li{
display:inline-block;
}
.footer{
color:rgba(255,255,255,.5);
}
.footer .heading{
color:#ffffff;
font-size:20px;
}
.hidden{
display:none;
}
.footer ul{
margin:0;
padding:0;
}
.footer ul li{
list-style:none;
margin-bottom:10px;
}
.footer ul li a{
color:rgba(255,255,255,1);
}
#media screen and (max-width: 500px){
.icon{
text-align:left;
}
} #media screen and (max-width: 500px){
.text-services{
padding-left:0;
padding-right:20px;
text-align:left;
}
}</style></head>
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
<center style="width:100%;background-color:#f1f1f1;">
<div style="display:none;font-size:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">
</div>
<div style="max-width:600px;margin:0 auto;" class="email-container">
<!-- BEGIN BODY -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
<tr>
<td valign="top" class="bg_white" style="padding:1em 2.5em;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="40%" class="logo" style="text-align:left;">
<h1>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/beabaa6f-844f-4ffa-9080-6391df1c3ef6.png" style="max-width:200px" alt="beabaa6f-844f-4ffa-9080-6391df1c3ef6.png">
</h1>
</td>
<td width="60%" class="logo" style="text-align:right;">
<ul class="navigation">
<li>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/ee34875d-ab9f-480d-a11e-150f8027462c.png" style="max-width:25px" alt="ee34875d-ab9f-480d-a11e-150f8027462c.png">
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td valign="middle" class="hero bg_white" style="background-image:url('https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg');background-size:cover;height:400px;">
<table>
<tr>
<td>
<div class="text" style="text-align:center;">
<h2></h2>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td class="bg_dark email-section" style="text-align:center;">
<div class="heading-section heading-section-white">
<h2>We have a new website!</h2>
<p>We're so excited to unveil our new website! Our website is now easy to navigate to our services, get a quote, and schedule your move. We're excited to give our customers a new, top notch experience to make their move as easy as possible.</p>
<p>visit the site
</p>
</div>
</td>
</tr>
<!-- end: tr -->
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_white email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>All New Service Pages</h2>
<p>We've redesigned and reinvented how deliver our services. We have a general breakdown of each service, plus a detailed service page for those of you who want to learn more specific details.</p>
</div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6a5e0310-9a5a-4b52-8487-4702c8cf4fb3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Residential
</h3>
<span class="price">Services include Local Moving, Long Distance and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/e5542099-d033-42ae-8f32-c9198cdc6e00.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Collegiate
</h3>
<span class="price">Services include Dorm Store, Lease Layover, Local Moving, and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/22fec672-03f3-4285-a75c-9dc4e1ef78f3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Commercial
</h3>
<span class="price">Services include FF&E, Employee Relocation, Corporate Relocation, and Instutional Moving.</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- end:tr -->
<tr>
<td class="bg_white email-section" style="width:100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6f23aa84-082e-4dba-9d2f-ca5c9fd414af.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
</td>
</tr>
</table>
</td>
<td valign="middle" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="text-services" style="text-align:left;padding-left:25px;">
<div class="heading-section">
<h3>Moving Tips</h3>
</div>
<div class="services-list">
<div class="text">
<h4>1. Pack up your things</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>2. Search for Destination</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>3. Be Responsible</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- Leave a Review -->
<tr>
<td class="bg_light email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>Leave us a Review!</h2>
<p>Had a good moving experience in the past? Please leave us a review on Google!</p>
<p>Leave a Review
</p>
</div>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
</table>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" width="60%" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-right:10px;">
<h3 class="heading">Follow Us</h3>
<p>Get the latest updates!</p>
<ul class="social">
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/31d75ed2-3027-49aa-b9f2-1969b2cb1f4b.png" alt="" style="width: 30px; padding-right:10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1f92f2b1-2e26-4add-acf8-b4f8c2056309.png" alt="" style="width: 30px; padding-right: 10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/63ede42c-5969-4eb5-8f64-5aa9add11cf6.png" alt="" style="width: 30px; max-width: 600px; height: auto; display: block;">
</li>
</ul>
</td>
</tr>
</table>
</td>
<td valign="top" width="40%" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-left:5px;padding-right:5px;">
<h3 class="heading">Contact Info</h3>
<ul>
<li>
<span class="text">130 Industrial Drive<br>Birmingham,AL 35211</span>
</li>
<li>
<span class="text">205-624-4537</span>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-right:10px;">
<p>© 2019 Move & Store. All Rights Reserved.</p>
</td>
</tr>
</table>
</td>
<td valign="top" width="33%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:right;padding-left:5px;padding-right:5px;">
<p>Unsubscribe
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I'm not sure why your hero image is a background image, but if you make it into a regular image, the hero will display in every major email client, including Gmail and Yahoo.
Try this instead:
<tr>
<td valign="middle" class="hero bg_white" style="">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg" width="600" />
</td>
</tr>
I pulled out the empty h2 below the image to make it simpler to display the relevant code.
Before I did this, your email hero did not display in Outlook 2007-2019. Even with changing the hero to an img, you have serious issues with this email in Outlook and other clients. I suggest more testing and development to help make sure your customers see your message.
Good luck.
Sometimes when I sent emails I receive answers stating that my email was empty. It seems very random and so far I have not been able to reconstruct this problem (have tested it on Gmail, Yahoo, AOL, Outlook, Mozilla Thunderbird, ... to no avail). It seems that only my email signature and/or sometimes also just the beginning of my email is displayed.
I've checked for font problems and problems within the html code of the mail, etc.
Where should I start?
Here's some sample code of the template I use that seems to create this error at random:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
...
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if !mso]>
<!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<![endif]-->
<style>
html, body{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
<table align="center" bgcolor="#0568A6" width="588" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:588px">
<![endif]-->
<tbody>
<tr>
<td style="display:block;width:100%;max-width:588px;margin:0 auto;padding:0;background-color:#0568a6">
<img src="logo.jpg" alt="Logo" width="125" height="26" border="0" align="right" style="float: right;border:0px !important" />
</td>
</tr>
</tbody>
<!--[if mso]>
</table>
<![endif]-->
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;" align="center" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; width:98%; max-width: 588px; margin: 0 auto; padding:35px 1% 28px; color: #111111;">
<table style="border-collapse: collapse; width: 100%;">
<!--[if mso]>
<table align="center" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-family:Verdana,Geneva,sans-serif; color: #222222; margin-bottom: 15px; font-weight: normal; font-size: 13pt; line-height: 1.25;">
Content
</p>
</td>
</tr>
<!--[if mso]>
</table>
<![endif]-->
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#efefef" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 588px;width:98%; margin: 0 auto; padding: 6px 1% 16px;">
<table style="border-collapse: collapse; width: 100%;" bgcolor="#efefef">
<!--[if mso]>
<table align="center" bgcolor="#efefef" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-size: 8.5pt; color: #999999;font-family:Verdana,Geneva,sans-serif; line-height: 1.2; border: 0;">
Footer
<br>
<br>
<a target="_blank" href="%UNSUBSCRIBELINK%" style="font-size: 8.5pt; color: #278ac8 !important; line-height: 1.2; text-decoration: none; border: 0;font-family:Verdana,Geneva,sans-serif;">
<span style="color: #278ac8; text-decoration: none;">
CLICK TO UNSUBSCRIBE
</span>
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I found the answer to this problem. It seems to be a bug in (earlier) versions of IE (who guessed it...).
The key part of the problem is the 1% padding right and left in the DIV element that serves as a container.
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
// this DIV has right and left padding of 1% which causes a bug in IE
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
... and so on
The result was that in some mail clients (Gmail, AOL, Comcast, maybe some others) the container of the message was rendered with a HUGE width (approx. 100,000px, for no obvious reason of course) of which the padding took ca. 1000px on each side.
As the content was centered, it was simply out of view for the person opening the message (no normal person has such a wide screen)
I replaced the 1% padding with a 3px padding and that solved the problem.
Below is a screen shot to show the problem, rendered in IE8. The solution is to change the padding as described above.
My client wants me to build a responsive email template with a dynamic area that will serve a different banner depending on which operating system is being used to view the email (targeting iOS, Android and desktops).
I know that if I use some JavaScript in my emailer I risk the email app counting the email as junk. This is not an option if the risk is too high.
Can anyone give me a clear insight or links that would help me accomplish this?
There is no way to check for all OS's in email as it would involve more than just HTML/CSS. You can however use the limitations of CSS per client and media queries to show or hide different pieces of content however.
In addition to hmhcreative's example which hides/shows mobile vs desktop, this thread may be useful regarding showing content to only mac clients.
With some clever media queries you can show one ad for desktop, another for mac-only portable devices and a default for everything else. Not a complete solution, but it is close.
Hope this one can help. Basically it uses media query to hide the desktop-version banner and show the mobile-version banner.
HTML:
<!--FOR DESKTOP-->
<table class="notmobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td><a href="#"><img style="display:block;" src="[path]/image-desktop.jpg" alt="BANNER" border="0" height="150" width="600" /></td>
</tr>
</table>
<!--//FOR DESKTOP-->
<!--FOR MOBILE-->
<div class="div_for_mobile" style="display: none; width: 0px; max-height: 0px; overflow: hidden;">
<table class="table_for_mobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="display: none;">
<tr>
<td><a href="#"><img style="display:block;" src="[path]/image-mobile.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
</tr>
</table>
</div>
<!--//FOR MOBILE-->
CSS:
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
div[class=div_for_mobile] {
display: block !important;
width: 100% !important;
max-height: inherit !important;
overflow: visible !important;
}
table[class=notmobile] {
display: none !important;
}
table[class=table_for_mobile] {
display: block !important;
}
}
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
div[class=div_for_mobile] {
display: block !important;
width: 100% !important;
max-height: inherit !important;
overflow: visible !important;
}
table[class=notmobile] {
display: none !important;
}
table[class=table_for_mobile] {
display: block !important;
}
.div_for_mobile .table_for_mobile tr :nth-child(2n){ display:none}
.div_for_mobile .table_for_mobile tr :nth-child(3n){ display:block!important;}
}
</style>
</head>
<body>
For desktop,
<table class="notmobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td><a href="#"><img style="display:block;" src="img/desktop.jpg" alt="BANNER" border="0" height="150" width="600" /></td>
</tr>
</table>
For mobile, use this:
<div class="div_for_mobile" style="display: none; width: 0px; max-height: 0px; overflow: hidden;">
<table class="table_for_mobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="display: none;">
<tr>
<td></td>
<td><a href="#"><img style="display:block;" src="img/android-test.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
<td style="display:none"><a href="#"><img style="display:block;" src="img/ios-test.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
</tr>
</table>
</div>
I have created a very simple html email.
http://staging.xhtml-lab.com/mailtest/
It's working fine in all email clients, except in hotmail.com/outlook.com
in hotmail email is left aligned, it should remain center aligned.
I have added following code as suggested by emailology.org, but it have no effect.
<style type=“text/css”>
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>
Any suggestions for what else i can do to make the email center aligned?
This should give you a centered e-mail:
<table style="width: 100%; background: red;">
<tr>
<td>
<center>
<table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
<tr>
<td>
Your content here
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
The center-tag is what is required by Outlook and outlook.com. Other clients use the margin attribute. In some clients, text is centered after the center-tag, and therefore the text-align attribute is required.
If you want the width to be variable depending on the screen size, use the following code:
<table style="width: 100%; background: red;">
<tr>
<td>
<center>
<!--[if mso]>
<table style="width: 640px;"><tr><td>
<![endif]-->
<div style="max-width: 800px; margin: 0 auto;">
<table style="background: blue; text-align: left;">
<tr>
<td>
Your content here
</td>
</tr>
</table>
</div>
</center>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
Outlook does not support max-width, and therefore the size is fixed to 640px for Outlook. For all other clients, the width of the e-mail will be the same as that of the viewing window, but maximum 800px.
Please let me know if you find a client where these solutions does not work, so that we can find a solution that works with as many clients as possible.
Here is one I've built that I use as the starting point for all my emails. It works 100% on all major email clients:
<!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></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->
content...
<!-- /CENTER BG COLOR -->
</td></tr></table>
<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>
It has a built in white background for when someone forwards the email on (they can type on white, while the background for the html designed part remains colored). Also the main panel is set with a bgcolor because Outlook puts gaps between tables when it is forwarded.
Hope that helps.
You can also center your email template by adding align="center"to your main table tag:
<body>
<table align="center">
<tr>
<td style="width:600px;">
<!-- content -->
</td>
</tr>
</table>
</body>
Works with GMail and Outlook
<body style="width:600px;margin: auto;">
<!-- content -->
</body>
I try to create an email with an image in a table as background image. I found a part of code that supposedly should work. In most email clients it does work, though in outlook 2010 I see the image, but not the text. Is there anything that I can do to make it work?
<!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>
<title>HVAC Success Confirmation</title>
</head>
<body style="background-color: #999999; vertical-align: top;">
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 600px; height: 350px; background-image: url('http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; top: 0; left: 0; border: 0; z-index: 1;' src="http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="350" align="center" valign="top" style="padding-top:80px">
<p>This table in here has a bunch of stuff I want to lay over the background image...</p>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
I found multiple pages like http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/ and http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/ but it did not got me further.
The only way I was able to do this is via this code (TD tables). I tested in outlook client 2010. I also tested via webmail client and it worked for both.
Copy and paste this and the only things you have to do is change your_image.jpg (there are two instances of this for the same image make sure you update both for your code) and #your_color.
<td bgcolor="#your_color" background="your_image.jpg">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="your_image.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
<![endif]-->
<p>Text over background image.</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
source