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".
Related
I'm trying to create Html email, in other email clients my layout looks great and responsive but when I check in outlook I have just one column instead of two columns, I tried to do a conditional statement for Microsoft Outlook, but no result, I get only one column, here is my code HTML, what I'm doing wrong, please?
/* styling */
.two-col{
text-align: center;
padding: 10px 0;
width: 100%;
font-size: 0;
}
.col{
display: inline-block;
width: 100%;
max-width: 300px;
margin-bottom: 5px;
vertical-align: top;
}
.padding{
padding: 25px;
}
.content{
font-size: 15px;
text-align: left;
}
<tr>
<td>
<table role="presentation" width="100%">
<tr>
<td class="two-col">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="300">
<![endif]-->
<table role="presentation" class="col">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/handsPinch.png" alt="Hands Pinch">
</td>
</tr>
<tr>
<td>
<h2>
Customize this email template!
</h2>
<p style="line-height: 24px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum mattis nisi mauris pharetra ullamcorper.
</p>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/Button.png" alt="Try it now">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="300">
<![endif]-->
<table role="presentation" class="col">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/handsGive.png" alt="Hands Give">
</td>
</tr>
<tr >
<td>
<h2>Customize this email template!</h2>
<p style="line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum mattis nisi mauris pharetra ullamcorper.</p>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/Button.png" alt="Try it now">
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
The columns are probably just-so-slightly larger than 300 each since you have not zeroed every <table> (e.g. <table role="presentation" class="col">)
Ensure every table has minimally the following: <table role="presentation" cellspacing="0" cellpadding="0" border="0">
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
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
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" />