Background: I build and send Email marketing and since the release of iOS9 all of our customers with this iOS version are experiencing this issue when opening our emails in the Mail App:
Screenshot
What you can see in the screenshot is the text overlapping the banner which is also overlapping the company logo. It seems that the text loads first then the banner and the text isn't being pushed down when the banner loads.
The code for the header module (with the logo), the banner, and the text module is below
<table id="header-table" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td>
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;">
<tr>
<td width="100%" style="padding:10px 15px;">
<table class="deviceWidth" cellpadding="0" cellspacing="0" border="0" width="300" align="left">
<tr>
<td class="logo" width="300" valign="top" align="center" style="mso-table-lspace:0;mso-table-rspace:0;">
<a rilt="Logo" target="_blank" href="http://www.aaa.com"><img width="300" height="125" border="0" style="display:block;" src="Logo.jpg" alt="aaa" class="deviceWidth" /></a>
</td>
</tr>
</table>
<table class="deviceWidth" cellpadding="0" cellspacing="0" border="0" width="300" align="right">
<tr class="hide">
<td align="right" style="padding:25px 0px 10px 0px;mso-table-lspace:0;mso-table-rspace:0;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="right">
<a class="telephone" href="tel:1800-555-555" style="color:#58585a; font-size:16px; text-decoration:none;"><img width="25" border="0" style="display:block;" src="/contentlibrary/cell/base/images/phone.png" alt=""/></a>
</td>
<td valign="middle" align="right" style="padding:0px 0px 0px 5px;font-family:arial;font-size:14px;line-height:14px;color:#B5ADA6;">
<a class="telephone" href="tel:1800-500-260" style="color:#B5ADA6; font-size:14px; text-decoration:none;">1800 555 555</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="deviceWidth nav" valign="top" align="right" style="padding:0px 0px 0px 0px;font-family:arial;font-size:11px;line-height:13px;color:#7E7774;">
<a rilt="TNavReds" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/red-wine?product-type=straight-cases">Chairs</a> | <a rilt="TNavWhites" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/white-wine?product-type=straight-cases">Sofas</a> | <a rilt="TNavMixes" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/mixed-cases">Shirts</a> | <a rilt="TNavSparkling" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/sparkling?product-type=straight-cases">Pants</a> <span class="hide" >| <a rilt="TNavClearance" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/wine-clearance">Shoes</a></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="banner-module" width="100%" min-width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background-color:#E5E0D9;">
<tr>
<td>
<table width="640" align="center" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td width="100%" align="center">
<a rilt="TopBanner" href="http://www.aaa.com?utm_link=TopBanner" target="_blank"><img width="640" height="400" border="0" style="display:block;" src="Banner.jpg" alt="Banner" class="deviceWidth"/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="1col-module-1" width="100%" min-width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto;">
<tr>
<td class="copy" width="100%" valign="top" align="left" style="font-family:arial;font-size:13px;line-height:16px;color:#000001;padding:30px 10px 10px 10px;">
Hi $First_Name$,
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis luctus elit ornare tempus. Phasellus eget luctus nisi. Mauris vel orci adipiscing, placerat velit nec, laoreet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam et mi erat.
<br />
<br />
Quisque malesuada massa in mi tristique, tincidunt consequat ligula tempor. Maecenas sollicitudin sem quis ipsum tristique adipiscing. Aenean tincidunt tortor lectus, vel ultricies lectus condimentum ut.
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I am currently working on mobilizing an email template for work. The desktop version should display an image on the left and text on the right within a table. This renders fine until I tried to add an additional table. It will not start on a new line and instead, the image starts on the right hand side with the text on the next line.
Here is the sample HTML:
<body>
<tr>
<td class="innerpadding">
<table width="200" align="left" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="200" style="padding: 0 10px 10px 0;">
<img src="images/article1.png" width="200" height="200" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;" >
<tr>
<td>
<table width="95%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!--This is where the next row and table begin-->
<tr>
<td class="innerpadding">
<table width="200" align="left" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="200" style="padding: 0 10px 10px 0;">
<img src="images/article1.png" width="200" height="200" border="0" alt=""/>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;">
<tr>
<td>
<table width="95%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</body>
I previously tried to use around the entire body, which fixed the issue, but undid the media queries that I created. Here is the inline style code that I'm using. I have been trying to apply an inline-block to the row, but it doesn't seem to render any render any differently:
tr {
display:inline-block
}
.innerpadding {padding: 0px 100px 0px 0px;}
#media only screen and (min-device-width: 400px) {
.col380 {width: 380px !important;}
}
Try this adding float left into the innerpadding class.
Also fix the your end tags you appear to be missing some. Additionally, not sure if you would want to use and when works perfectly. So I changed the beginning and to and
This is what worked for me:
.innerpadding {
padding: 0px 100px 0px 0px;
float: left
}
<!DOCTYPE html>
<html>
<head>
<style>
tr {
display: inline-block;
}
.innerpadding {
padding: 0px 100px 0px 0px;
float: left
}
{
table:;
}
</style>
<title>Something</title>
</head>
<body>
<div class="innerpadding">
<table width="200" align="left" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="200" style="padding: 0 10px 10px 0;">
<img src="images/article1.png" width="200" height="200" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;" >
<tr>
<td>
<table width="95%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--This is where the next row and table begin-->
<div class="innerpadding">
<table width="200" align="left" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="200" style="padding: 0 10px 10px 0;">
<img src="images/article1.png" width="200" height="200" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;" >
<tr>
<td>
<table width="95%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
</script>
</html>
References: http://www.w3schools.com/cssref/pr_class_float.asp
I think you've taken the "use tables in emails" a bit wrong. The point is not wrapping every single element inside a table, but to make the whole email one big table. Some email clients are from the last century when it comes to properly render CSS based layout. There is the only reason to use tables (except you really want tables): layout. With tables you tell what goes where on the page by putting your elements inside table cells. This way you can have layout without any CSS.
In case you insist on useless, bloated boilerplate code: try a <br> between the tables. <br> means "break line".
Background: I build and send Email marketing and since the release of iOS9 all of our customers with this iOS version are experiencing this issue when opening our emails in the Mail App:
What you can see in the screenshot is the text overlapping the banner which is also overlapping the company logo. It seems that the text loads first then the banner and the text isn't being pushed down when the banner loads.
The code for the header module (with the logo), the banner, and the text module is below
<table id="header-table" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td>
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;">
<tr>
<td width="100%" style="padding:10px 15px;">
<table class="deviceWidth" cellpadding="0" cellspacing="0" border="0" width="300" align="left">
<tr>
<td class="logo" width="300" valign="top" align="center" style="mso-table-lspace:0;mso-table-rspace:0;">
<a rilt="Logo" target="_blank" href="http://www.aaa.com"><img width="300" height="125" border="0" style="display:block;" src="Logo.jpg" alt="aaa" class="deviceWidth" /></a>
</td>
</tr>
</table>
<table class="deviceWidth" cellpadding="0" cellspacing="0" border="0" width="300" align="right">
<tr class="hide">
<td align="right" style="padding:25px 0px 10px 0px;mso-table-lspace:0;mso-table-rspace:0;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="right">
<a class="telephone" href="tel:1800-555-555" style="color:#58585a; font-size:16px; text-decoration:none;"><img width="25" border="0" style="display:block;" src="/contentlibrary/cell/base/images/phone.png" alt=""/></a>
</td>
<td valign="middle" align="right" style="padding:0px 0px 0px 5px;font-family:arial;font-size:14px;line-height:14px;color:#B5ADA6;">
<a class="telephone" href="tel:1800-500-260" style="color:#B5ADA6; font-size:14px; text-decoration:none;">1800 555 555</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="deviceWidth nav" valign="top" align="right" style="padding:0px 0px 0px 0px;font-family:arial;font-size:11px;line-height:13px;color:#7E7774;">
<a rilt="TNavReds" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/red-wine?product-type=straight-cases">Chairs</a> | <a rilt="TNavWhites" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/white-wine?product-type=straight-cases">Sofas</a> | <a rilt="TNavMixes" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/mixed-cases">Shirts</a> | <a rilt="TNavSparkling" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/sparkling?product-type=straight-cases">Pants</a> <span class="hide" >| <a rilt="TNavClearance" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/wine-clearance">Shoes</a></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="banner-module" width="100%" min-width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background-color:#E5E0D9;">
<tr>
<td>
<table width="640" align="center" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td width="100%" align="center">
<a rilt="TopBanner" href="http://www.aaa.com?utm_link=TopBanner" target="_blank"><img width="640" height="400" border="0" style="display:block;" src="Banner.jpg" alt="Banner" class="deviceWidth"/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="1col-module-1" width="100%" min-width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto;">
<tr>
<td class="copy" width="100%" valign="top" align="left" style="font-family:arial;font-size:13px;line-height:16px;color:#000001;padding:30px 10px 10px 10px;">
Hi $First_Name$,
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis luctus elit ornare tempus. Phasellus eget luctus nisi. Mauris vel orci adipiscing, placerat velit nec, laoreet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam et mi erat.
<br />
<br />
Quisque malesuada massa in mi tristique, tincidunt consequat ligula tempor. Maecenas sollicitudin sem quis ipsum tristique adipiscing. Aenean tincidunt tortor lectus, vel ultricies lectus condimentum ut.
</td>
</tr>
</table>
</td>
</tr>
</table>
If you rotate the screen to landscape and flip it back to portrait it forces the email to render correctly - however this is not an ideal long term solution
I have written an e-mail which works fine in every platform except lotus notes. Can anyone help me with any rationale for this e-mail not working properly in Notes? Here is a screenshot:
img http://kimjongeun.org/images/notes.JPG (fake images obviously)
The e-mail is cut in half - it seems the second section is where the error lies - starts where you can find the image:
img src="http://kimjongeun.org/images/body.png" .
There is excess padding to the right and left and the text is not spacing properly. There are TDS on the right and left which act as padding (50px respectively). I have tried to remove these TDs to no avail.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Derrrrrp!</title>
</head>
<body>
<center>
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="background: #002b62;" width="600">
<tr>
<td colspan="4" height="212"><img src="http://kimjongeun.org/images/thanks.jpg" border="0" alt="Thank You from your friends at Derp!" title="Thank you from your friends at Derp!"></td>
</tr>
<tr>
<td width="600" colspan="4" valign="top" style="text-align:center; padding-bottom:10px;">
<p style="font-size:20px; color: #FFFFFF; font-family: Verdana; line-height:1.286;">We appreciate your interest in<br>Derp's Derp solutions.</p>
</td>
</tr>
<tr>
<td colspan="4" height="33"><img src="http://kimjongeun.org/images/dot.png" border="0" alt="Thank You from your friends at Derp!" title="Thank you from your friends at Derp!">
</td>
</tr>
<tr>
<td colspan="4">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50"></td>
<td>
<p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">
Dear Attendee,</p>
<p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius nibh dictum, fringilla massa a, efficitur ex. Nulla malesuada hendrerit varius. Duis quam</p>
<p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Nullam vel mi dui. Integer ut tempor ante. Aenean efficitur aliquet tempor. Morbi facilisis vestibulum elit porttitor posuere. Nulla id dolor vulputate, cursus ligula eu, maximus augue. Nulla facilisi. Proin ac scelerisque est, Nulla id dolor vulputate, cursus ligula eu, maximus augue. Nulla facilisi.</p>
<p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Nulla malesuada hendrerit varius. Duis quam lorem, cursus in turpis ac, bibendum cursus dolor.</p>
</td>
<td width="50"></td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="background:#D0D3E4" width="600">
<tr>
<td colspan="4"><img src="http://kimjongeun.org/images/body.png" height="202" border="0" alt="Thank you from your friends at Derp!" title="Thank You from your friends at Derp!"></td>
</tr>
<tr>
<td width="50"></td>
<td width="500" colspan="2">
<p style="font-family:Verdana; color:#EC673E; font-size: 20px; line-height:1.177; text-align:center;">NEED MORE INFORMATION?<br>
<p style="font-family:Arial; color:#0053A1; font-size:16px; line-height:1; text-align:center; margin-top:-10px;">To make a request for derpas or to submit follow-up derpings, please don't hesitate to contact your DerpS DerpA DErps.</p>
</td>
<td width="50"></td>
</tr>
<tr>
<td colspan="4" style="background:#D0D3E4;" height="98"><img src="http://kimjongeun.org/images/nss.gif" title="Thank you from your friends at Derp!" alt="Thank You from your friends at Derp!" height="98">
</td>
</tr>
<tr>
<td width="50"></td>
<td width="500" colspan="2" align="center">
<p style="font-family: Verdana; font-size: 9px;">Derp does not participate in unsolicited emails. This was sent to you because you subscribed to receive promotional emails and updates from Derp during a previous program or promotion.</p>
<p style="font-family: Verdana; font-size: 9px;"><a style="color:#000; font-family: Verdana; font-size: 9px;"" href="#unsubscribe">Unsubscribe</a> | <a style="font-family: Verdana; font-size: 9px; color:#000;" href="#privacy">Privacy Policy</a></p>
<p style="font-family: Verdana; font-size: 9px;">© 2015 Derp Corporation. All Rights Reserved. 4/15 15471</p> </td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Quick googling reveals that Lotus Notes is obviously rather tricky about (some) HTML emails.
My guess: it simply complains about the HTML not being valid (unclosed tags, missing end tags etc).
I did a quick fix of your HTML using foxe XML Editor. Try if the following HTML works. If it does, LN handles HTML emails just fine:
<html>
<head>
<meta charset="utf-8"/>
<title>Derrrrrp!</title>
</head>
<body>
<center>
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="background: #002b62;" width="600">
<tr>
<td colspan="4" height="212">
<img src="http://kimjongeun.org/images/thanks.jpg" border="0" alt="Thank You from your friends at Derp!" title="Thank you from your friends at Derp!"/>
</td>
</tr>
<tr>
<td width="600" colspan="4" valign="top" style="text-align:center; padding-bottom:10px;">
<p style="font-size:20px; color: #FFFFFF; font-family: Verdana; line-height:1.286;">We appreciate your interest in<br/>Derp's Derp solutions.</p>
</td>
</tr>
<tr>
<td colspan="4" height="33">
<img src="http://kimjongeun.org/images/dot.png" border="0" alt="Thank You from your friends at Derp!" title="Thank you from your friends at Derp!"/>
</td>
</tr>
<tr>
<td colspan="4">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50"></td>
<td>
<p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Dear Attendee,</p>
<p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius nibh dictum, fringilla massa a, efficitur ex. Nulla malesuada hendrerit varius. Duis quam</p>
<p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Nullam vel mi dui. Integer ut tempor ante. Aenean efficitur aliquet tempor. Morbi facilisis vestibulum elit porttitor posuere. Nulla id dolor vulputate, cursus ligula eu, maximus augue. Nulla facilisi. Proin ac scelerisque est, Nulla id dolor vulputate, cursus ligula eu, maximus augue. Nulla facilisi.</p>
<p style="font-size:16px; font-family: Arial; color: #FFFFFF; text-align:left;line-height:1.3;">Nulla malesuada hendrerit varius. Duis quam lorem, cursus in turpis ac, bibendum cursus dolor.</p>
</td>
<td width="50"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="background:#D0D3E4" width="600">
<tr>
<td colspan="4">
<img src="http://kimjongeun.org/images/body.png" height="202" border="0" alt="Thank you from your friends at Derp!" title="Thank You from your friends at Derp!"/>
</td>
</tr>
<tr>
<td width="50"></td>
<td width="500" colspan="2">
<p style="font-family:Verdana; color:#EC673E; font-size: 20px; line-height:1.177; text-align:center;">NEED MORE INFORMATION?<br/>
<p style="font-family:Arial; color:#0053A1; font-size:16px; line-height:1; text-align:center; margin-top:-10px;">To make a request for derpas or to submit follow-up derpings, please don't hesitate to contact your DerpS DerpA DErps.</p></p>
</td>
<td width="50"></td>
</tr>
<tr>
<td colspan="4" style="background:#D0D3E4;" height="98">
<img src="http://kimjongeun.org/images/nss.gif" title="Thank you from your friends at Derp!" alt="Thank You from your friends at Derp!" height="98"/>
</td>
</tr>
<tr>
<td width="50"></td>
<td width="500" colspan="2" align="center">
<p style="font-family: Verdana; font-size: 9px;">Derp does not participate in unsolicited emails. This was sent to you because you subscribed to receive promotional emails and updates from Derp during a previous program or promotion.</p>
<p style="font-family: Verdana; font-size: 9px;"><a style="color:#000; font-family: Verdana; font-size: 9px;" href="#unsubscribe">Unsubscribe</a> | <a style="font-family: Verdana; font-size: 9px; color:#000;" href="#privacy">Privacy Policy</a></p>
<p style="font-family: Verdana; font-size: 9px;">© 2015 Derp Corporation. All Rights Reserved. 4/15 15471</p> </td>
<td></td>
</tr>
</table>
</td>
</tr>
</center>
</body>
</html>
The issue was the "colspans".
They were not precise.
I also had to take out the TD's which essentially were acting as "padding right" and "padding left" - they were 50 pixels each, beginning on the second table.
All worked out.
Thanks.
I have an issue where there is a small 1px border on the right hand side of the nemo image in Outlook 2007, 2010 and 2013, as shown below...
However, this doesn't happen in any other email browser... Here is the HTML code I am using...
<div id="top" align="center" style="background:#fff400; background-color:#fff400;">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; width: 100%;" bgcolor="#FFFFFF" class="hide">
<tbody><tr>
<td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="20" width="1"></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;">
<table align="center" width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFFFFF" class="table">
<tbody><tr>
<td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="1" width="20"></td>
<td width="600" colspan="3" align="left" valign="top" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:12px;">
Click here if you can't read this email
</td>
<td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="1" width="20"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="20" width="1"></td>
</tr>
</tbody></table>
<table align="center" width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFF400" class="table">
<tbody><tr>
<td width="580" align="left" bgcolor="#fff400" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" width="1" height="15" style="display:block" border="0"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr style="font-size:12px; font-family: Arial, Geneva, sans-serif; color:#000000;" align="left" valign="top">
<td align="left" valign="top">
<table class="table">
<tbody>
<tr>
<td><img src="http://placekitten.com/172/115" width="172" height="115" alt="Alt Tag" style="display:block;" border="0" class="mob_img hide"></td>
<td><img src="http://placekitten.com/406/115" width="406" height="115" alt="The 10 Minute Shake Up" style="display:block;" border="0" class="mob_img"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" height="20" width="1"></td>
</tr>
<tr>
<td align="left" valign="top">
<table width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFFFFF" class="table300">
<tbody>
<tr>
<td colspan="3"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="20" height="1" style="display:block" border="0"></td>
<td align="right" valign="top">
<table align="left" width="270" border="0" cellspacing="0" cellpadding="0" class="mob_left table300">
<tbody><tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#00b3f0; font-size:24px; padding-top:10px;"><img src="http://placekitten.com/270/88" width="270" height="88" alt="" class="mob_img " style="display:block;" border="0"></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:20px; padding-top:10px;"><strong>Hello {Name},</strong></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="1" height="16" style="display:block" border="0"></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium mi vel magna rhoncus, et pulvinar mauris varius. Nullam tincidunt, ipsum in eleifend tincidunt, tortor turpis viverra turpis, vehicula facilisis dui arcu quis sem. Aenean tincidunt diam orci, eget feugiat ante gravida eu. Fusce venenatis mollis nisi eget vulputate. Vestibulum ut turpis eget urna tincidunt volutpat sed at lorem. Donec non neque eget mauris gravida fringilla.</td>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="10" height="16" style="display:block" border="0"></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="1" height="16" style="display:block" border="0"></td>
</tr>
</tbody></table>
<table border="0" cellspacing="0" cellpadding="0" align="right" class="table" style="mso-table-rspace: 0pt; mso-table-lspace: 0pt;">
<tbody><tr>
<td align="right" valign="top"><span id="nemoswitch"><img src="http://design.datalateral.com\serco\73851\emails\emailOne/images/nemoDesktop_11.jpg" width="310" height="408" alt="Finding Nemo" id="nemo" class="mob_img" style="display:block;" border="0"></span></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="3"><span id="nemobottomswitch"><img id="nemoBottom" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_16.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
Here is a link to the fiddle. Any ideas where I am going wrong?
Thanks.
You are using a background color in your table cell.
To fix, simply add the following to your embedded styles:
table td { border-collapse: collapse; }
Or you can add it inline:
<td style="border-collapse: collapse;">... </td>
Checkout this post
In your table(where you have a issue) you have used colspan="3". But your table only have two column. No idea why you have added colspan="3".
Change this
<td colspan="3"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
To
<td colspan="2"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
Do the same thing for the bottom row also.
I am making an HTML email to send from my website when people use the contact form, and with all of the testing I've done, I've managed to squash many bugs, but despite many attempts and plenty of searching around, I can't seem to manage to get my email to take 100% width on iPhone's.
Here's a screenshot of the problem: http://i62.tinypic.com/2r6mh5y.png
And here's a copy of the code I'm using:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<title></title>
<style type="text/css">
html, body { width: 100% !important; }
p { font-family: Arial; }
a { font-family: Arial; }
td { font-family: Arial; }
</style>
</head>
<body bgcolor="#000000" style="font-family:Arial; min-width:100%; background-color:#000000; margin:0; padding:0;" topmargin="0">
<table width="100%" bgcolor="#000000" style="width:100%; background-color:#000000; background-image:url(http://newsite.moninfolettre.ca/images/courriel/top_bg.jpg); background-position:center top; background-repeat:repeat repeat;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600" height="130" align="center" valign="middle">
<img src="http://newsite.moninfolettre.ca/images/courriel/logo_courriel.png" alt="Geant du web - Infolettre" width="168" height="61" style="font-size:18px; font-family:Arial; color:#FFFFFF;" />
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#CD0C11" style="width:100%; background-color:#CD0C11" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="4" style="font-size:1px;-webkit-text-adjust:none;"> </td>
</tr>
</table>
<table width="100%" bgcolor="#F2F2F2" style="width:100%; background-image:url(http://newsite.moninfolettre.ca/images/courriel/shadow.jpg); background-position:center top; background-repeat:repeat no-repeat; background-color:#F2F2F2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="520">
<table>
<tr>
<td style="font-size:32px; padding:20px 0 0; white-space:nowrap;">Votre transaction est</td>
</tr>
<tr>
<td style="font-size:32px; font-weight:900; color:#E30512; padding:0 0 15px; white-space:nowrap;">
complétée avec succès !!
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#FFFFFF" style="width:100%; background-color:#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="520" style="padding:20px 0 0; color:#5A5A5A">
<p style="margin:0 0 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p style="margin:20px 0;">Praesent nulla felis, malesuada eu sapien vitae, pretium dictum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam faucibus dui in est euismod, at sollicitudin elit aliquam. Nulla augue ante, tincidunt vel sodales id, tincidunt non nibh.</p>
<p style="margin:20px 0;">In hac habitasse platea dictumst. Aliquam feugiat aliquam tortor, id vestibulum dui rutrum vel. Nulla tincidunt, tortor vitae iaculis scelerisque, ipsum augue gravida ipsum, ac faucibus mauris urna et tortor.</p>
<p style="margin:20px 0;">Duis luctus pretium turpis, sed iaculis mauris commodo at. Aliquam dictum venenatis enim et tincidunt. In hac habitasse platea dictumst. Sed viverra laoreet neque, vel sodales tellus luctus vitae.</p>
<p style="margin:20px 0;">Merci d'avoir fait confiance à <strong style="font-weight:900;">GÉANT DU WEB !</strong></p>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#F2F2F2" style="width:100%; background-color:#F2F2F2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40"> </td>
<td width="260" style="padding:30px 0 20px;">
<table>
<tr>
<td style="padding:0 0 10px;">Accèdez dès maintenant à</td>
</tr>
<tr>
<td>
<table width="165" height="35" bgcolor="#E30512" style="width:165px; background-color:#E30512; border-radius:10px;">
<tr>
<td align="center" valign="middle" style="font-size:14px; font-weight:900; text-transform:uppercase;">
Votre compte
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:20px 0 10px;">ou contactez notre équipe:</td>
</tr>
<tr>
<td style="color:#5A5A5A;">Sans frais</td>
</tr>
<tr>
<td style="font-size:24px; font-weight:900; color: #E30512; line-height:100%; padding:0 0 10px;">1-888-86-GÉANT</td>
</tr>
<tr>
<td style="color:#5A5A5A;">Montréal</td>
</tr>
<tr>
<td style="font-size:24px; font-weight:900; color: #E30512; line-height:100%; padding:0 0 20px;">(514) 359-2949</td>
</tr>
<tr>
<td>Besoin de Support en ligne ?</td>
</tr>
</table>
</td>
<td width="300" valign="bottom" style="padding:0px;">
<img src="http://newsite.moninfolettre.ca/images/courriel/robot.jpg" alt="" style="display:block;" width="300" height="280" />
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#000000" style="width:100%; background-color:#000000; background-image:url(http://newsite.moninfolettre.ca/images/courriel/bottom_bg.jpg); background-position:center top; background-repeat:repeat repeat;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600" height="100" align="center" valign="middle">
<a href="www.moninfolettre.ca" style="font-size:24px; text-decoration:none; text-transform:uppercase; color:#FFFFFF;">
<span style="color:#FFFFFF;">www.moninfolettre.ca</span>
</a>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Any elements that you want to have a width of 100%, add an addtional a pixel based min-width
For example:
width: 100%;
min-width: 600px;
Or inline with <table style="min-width: 600px; width: 100%;" width="100%">
I double up with the width attribute just for that extra surety. You just never know... :)
Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout is corrupted.
You can fix this setting the viewport, or by adding min-width:"your body width" of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport.
to set the viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0" />