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.
Related
There is extra padding around my <p> tag that is visible in browser and email client when viewing however I cannot see it in the html. I do not want any padding above and below the <p> tag.
When I view the html in a browser and look at the source, I can see "" text node added but I cannot see them in the html therefore cannot remove them.
Can anyone help me remove this extra padding above/below <p> tag?
<table border="0" cellpadding="0" cellspacing="0" class="flexibleContainer" width="100%">
<tbody>
<tr>
<td align="center" valign="top">
<table bgcolor="f2f1ee" border="0" cellpadding="0" cellspacing="0" class="flexibleContainer" style="width:580px; padding-top: 0px; padding-bottom: 0px;" width="580">
<tbody>
<tr>
<td align="left" class="narrowFlexibleContainerCell" style="width:580px;padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;" valign="top" width="580">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="narrowFlexibleContainerCell" style="width:560px; padding-right: 0px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px;" valign="top" width="560">
<table bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="textContent" valign="top">
<p style="padding-right: 20px; padding-left: 20px;padding-top: 0px; padding-bottom: 0px; margin: 0em "><Lorem Ipsum: </strong><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate convallis risus sed sollicitudin. Suspendisse vel arcu vel erat dapibus tincidunt. Nunc quis orci imperdiet, lobortis quam at, mollis lacus. Aliquam mattis mi bibendum ultrices mattis. Fusce a felis lacinia felis elementum imperdiet.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-size: 5px;"> </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
You have a strong tag which is not correctly open around the first part of your text:
<Lorem Ipsum: </strong>
must be :
<strong>Lorem Ipsum: </strong>
Near the end, you have an empty paragraph with font-size set to 5px; i.e.
<p style="font-size: 5px;"> </p>
Try removing the margins around it, like this:
<p style="font-size: 5px; margin: 0;"> </p>
This p?
<p style="font-size: 5px;"> </p>
If so, unlike the other paragraph tags in your code, you do not have margin: 0; on that one.
Interesting thing is many HTML elements have default margin. The extra space is margin-top and margin-bottom, not padding. Setting the style to margin: 0; will eliminate this.
A handy list: https://www.w3schools.com/cssref/css_default_values.asp
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:
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>
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" />
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/