I'm attempting to create an HTML email which is why I'm using tables. I have some beginning text followed by some bullet points beneath it. However, the beginning text is pushed to the right instead of lining up atop the bullet points.
Here's a simple fiddle: http://jsfiddle.net/wWxYg/
My HTML:
<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" align="left" valign="top">
<img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />
</td>
<td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;">
<p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">
Title Section Goes Here
</p>
<p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
</p>
<p style="margin: 13px 0 13px; color: #585A63;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
</p>
<p style="margin: 13px 0 13px; color: #585A63;">
Sub Title Goes Here:<br /><br />
</p>
</td>
</tr>
<tr>
<td>
<table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;">
<tr>
<td width="5" height="15" valign="top">•</td>
<td width="250" height="15" valign="top">Interesting point number 1</td>
</tr>
<tr><td> </td></tr>
<tr>
<td width="5" height="15" valign="top">•</td>
<td width="250" height="15" valign="top">Interesting point number 2</td>
</tr>
<tr><td> </td></tr>
<tr>
<td width="5" height="15" valign="top">•</td>
<td width="250" height="15" valign="top">Interesting point number 3</td>
</tr>
<tr><td> </td></tr>
<tr>
<td width="5" height="15" valign="top">•</td>
<td width="250" height="15" valign="top">Interesting point number 4</td>
</tr>
</table>
</td>
</tr>
</table>
In your outer table you have two rows. The first row has two columns and the second row only has one. If you remove the column in the first row that contains the spacer image, it should line up properly.
Remove this:
<td width="15" align="left" valign="top">
<img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />
</td>
It seems to be because you nested one table inside the other. Here's a fiddle with them de-nested: http://jsfiddle.net/wWxYg/1/
Here's the code, too.
<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" align="left" valign="top">
<img src="images/spacer.gif" width="15" height="2" border="0" alt=" "/>
</td>
<td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;">
<p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">
Title Section Goes Here
</p>
<p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
</p>
<p style="margin: 13px 0 13px; color: #585A63;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
</p>
<p style="margin: 13px 0 13px; color: #585A63;">
Sub Title Goes Here:<br /><br />
</p>
</td>
</tr>
</table>
<table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;">
<tr>
<td width="5" height="15" valign="top">•</td>
<td width="250" height="15" valign="top">Interesting point number 1</td>
</tr>
<tr><td> </td></tr>
<tr>
<td width="5" height="15" valign="top">•</td>
<td width="250" height="15" valign="top">Interesting point number 2</td>
</tr>
<tr><td> </td></tr>
<tr>
<td width="5" height="15" valign="top">•</td>
<td width="250" height="15" valign="top">Interesting point number 3</td>
</tr>
<tr><td> </td></tr>
<tr>
<td width="5" height="15" valign="top">•</td>
<td width="250" height="15" valign="top">Interesting point number 4</td>
</tr>
</table>
In the first row I swapped the first cell with the second. If you want spacing you can add a padding-left:10px;
jsfiddle: http://jsfiddle.net/wWxYg/2/
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".
Been building a responsive HTML/CSS email and have managed to use all the tricks I know to make it work in most places... but I'm currently having real issues with the Gmail app (on a HTC One Mini 2, if it makes a difference).
What it should do (roughly) is this:
http://s21.postimg.org/7aw1izuxj/shoulddo.png
What it does do is this: s4.postimg.org/g9dm9t68d/isdo.png
(Ignore the weird colouring - it helps me debug)
The code which does this is:
<table class="cooptwocol" style="background-color: red; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="coophalfwidth" align="left" style="width: 300px; background-color: #f2f2f2; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td><img src="300x300.jpg" width="300px"></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="coophalfwidth" align="left" style="width:300px; background-color: #f2f2f2; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 15px; font-size: 15px; background-color: blue;" valign="top" rowspan="7"> </td>
<td colspan="3" style="font-size: 15px;"> </td>
<td style="width: 15px; font-size: 15px; background-color: blue;" valign="top" rowspan="7"> </td>
</tr>
<tr>
<td colspan="3" style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000000;">Title One</td>
</tr>
<tr>
<td colspan="3" style="font-size: 15px;"> </td>
</tr>
<tr>
<td colspan="3" style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ac hendrerit nibh, ac efficitur libero. Mauris dapibus ante non urna varius dignissim. Phasellus eget finibus orci. Morbi vel dictum turpis. In finibus hendrerit
nisi eu accumsan. In nec ante, sed scelerisque eros. In accumsan rhoncus.</td>
</tr>
<tr>
<td colspan="3" style="font-size: 15px;"> </td>
</tr>
<tr>
<td><img src="ctaleftgrey.jpg" style="border: 0; text-decoration: none;" align="right"></td>
<td style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608;">Call to action</td>
<td><img src="ctarightgrey.jpg" style="border: 0; text-decoration: none;" align="left"></td>
</tr>
<tr>
<td colspan="3" style="font-size: 15px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
(No point in posting the CSS for the classes as the Gmail app ignores them anyway!)
I've tried everything I can think of and nothing is helping to get these blocks lined up in the Gmail app - resizing image part, resizing text part, nesting further tables, mucking about with background colours... And now I'm out of ideas!
Any help gratefully appreciated! Long-time user, first time poster on StackOverflow :)
********EDIT********
OK, so much tweaking later... it's improved a lot, it's just not aligning correctly...
See image here: http://s16.postimg.org/kzm0gd4k5/Screenshot_2015_08_07_10_43_18.png
It's like that because I have to left align the first nested table (the left column, displaying as the first block in the image) and right align the second (the right column, bottom section of image), but I was wondering if there's another way to do that which isn't going to mess it up on the Gmail app?
So I discovered that it's all because of the Gmail app's "Auto-resize" or "Auto-fit" options!
The solution was to add a "min-width: 620px" (the size of my widest bit of email) to any 620px full width part.
Sometimes it's just finding the right thing to search for is what helps :)
Source: https://litmus.com/community/discussions/257-gmail-app-android-how-to-stop-text-from-auto-resizing
Thought I'd post the answer as I'd got it in case someone finds this in the future!
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" />