This is how my email look in a browser When I open the email
The browser adding a random end div ...
This is what the email look when I put the html code into a file Html code in a file
Does there is a rule when the email exceed a certain height, the browser will split the message in separate div ?
The whole html code (idk why the doctype does not appear in the code block ...)
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:#eeeeee;
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
-webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6 {
color:#39434d !important;
margin-bottom:10px !important;
}
a, a:link, a:visited {
color:#777777;
text-decoration:none;
border-bottom:1px #777777 dotted;
}
a:hover, a:active {
text-decoration:none;
color:#0f79aa !important;
border-bottom:1px #0f79aa dotted !important;
}
img {
border:0;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.yshortcuts { color: #999999 }
.yshortcuts a span { color: #777777 }
</style>
</head>
<body link="#777777" vlink="#777777">
<table id="container" align="center" cellpadding="0" cellspacing="0" style="width: 100%; margin:0; padding:0; background-color:#eeeeee;">
<tr>
<td style="padding:0 20px;">
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td style="color:#ffffff; padding:20px 0;">
<img align="left" border="0" vspace="0" hspace="0" alt="Logo" src="http://ui-dev.reslynx.com/img/mail/logo-voyage-en-direct.png"></td>
<td width="100" style="padding:20px 0;" valign="bottom">
<!-- <img alt="-" height="7" src="http://ui-dev.reslynx.com/img/mail/arrow.gif" width="10" border="0"><a style="border-bottom:1px #2a8fbd dotted; text-decoration:none; color:#2a8fbd;" href="#">View online</a>-->
</td>
<td width="100" style="padding:20px 0;" valign="bottom">
<!--<img alt="-" height="7" src="http://ui-dev.reslynx.com/img/mail/arrow.gif" width="10" border="0"><a style="border-bottom:1px #2a8fbd dotted; text-decoration:none; color:#2a8fbd;" href="#">Forward</a>-->
</td>
</tr>
</table>
<!--End of Logo and view online | forward links-->
<!--Start of main content container - row#1-->
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td bgcolor="#FFFFFF" valign="top">
<img alt="image" height="130" src="http://ui-dev.reslynx.com/img/mail/travel.png" width="620" border="0" align="left" vspace="0" hspace="0" style="display:block;"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="padding:15px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<h1 style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:20pt; color:#39434d; font-weight:lighter; margin-top:0; margin-bottom:10px !important;">Confirmation de votre <span style="font-weight:bold; color:#2a8fbd;">Commande</span> de billets d'avion</h1><br/>
Votre numéro de confirmation pour cette commande est le : 2270657<br/><br/>
<h2 style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:17pt; color:#39434d; font-weight:lighter; margin-top:0; margin-bottom:10px !important;">
Vous pouvez également consulter les <span style='color:#2a8fbd;'>détails</span> de votre commande en cliquant sur le lien suivant : <a href="http://voyagesbergeron-dev.reslynx.com/invoice/ae73251458f68d73f88db47aee81cc771454703156/2270657/LRD9CI">Détail</a>
</h2>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="bottom">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:2px; line-height:2px;"><img alt="" height="20" src="http://ui-dev.reslynx.com/img/mail/shadow620.gif" width="620" border="0" style="display:block;"></td>
</tr>
</table>
<!--End of main content container - row#1-->
<!--Start of three content container - row#4-->
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="top">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="padding:10px 20px 15px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<h2 style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:17pt; color:#39434d; font-weight:lighter; margin-top:0; margin-bottom:10px !important;">Détail sur le <span style='color:#2a8fbd;'>vol</span> enregistré:</h2>
<div style="border:1px solid grey">
<table width="580" >
<tr>
<td><img src="http://ui-dev.reslynx.com/img/airlines/UA.jpg" onerror="this.src='http://ui-dev.reslynx.com/img/airlines/default.jpg'" style="max-width:24px;" />
United Airlines
</td>
<td style="text-align:center">
<b>07:00</b><br/>
YUL
</td>
<td>
6h 24min
</td>
<td>
<img src="http://ui-dev.reslynx.com/img/airplane-mode.png" alt="Un avion" style="width:20px;height:20px;display:block;" vspace="0" />
</td>
<td style="text-align:center">
<b>13:24</b><br/>
MIA
</td></tr><tr>
<td style="border-top:1px solid #E3E8EA">
<img src="http://ui-dev.reslynx.com/img/airlines/UA.jpg" onerror="this.src='http://ui-dev.reslynx.com/img/airlines/default.jpg'" style="max-width:24px;" />
United Airlines
</td>
<td style="border-top:1px solid #E3E8EA;text-align:center">
<b>07:00</b><br/>
YUL
</td>
<td style="border-top:1px solid #E3E8EA">
9h 19min
</td>
<td style="border-top:1px solid #E3E8EA">
<img src="http://ui-dev.reslynx.com/img/airplane-mode-inbound.png" alt="Un avion" style="width:20px;height:20px;display:block;" vspace="0" />
</td>
<td style="border-top:1px solid #E3E8EA;text-align:center">
<b>13:24</b><br/>
MIA
</td>
</tr></table>
</div>
<p>Date de départ : 05 Mars 2016 Montreal Vers </p><p>Date de retour : 12 Mars 2016 Vers Montreal</p></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="bottom">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:2px; line-height:2px;"><img alt="" height="20" src="http://ui-dev.reslynx.com/img/mail/shadow620.gif" width="620" border="0" style="display:block;"></td>
</tr>
</table>
<!--End of three content container - row#4-->
<!--Start of three content container - row#4-->
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="top">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="padding:10px 20px 15px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<h2 style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:17pt; color:#39434d; font-weight:lighter; margin-top:0; margin-bottom:10px !important;">Détail sur le(s) <span style='color:#2a8fbd;'>passager(s)</span> enregistré(s):</h2>
<div style="border:1px solid grey">
<table width="580" ><tr><td><img align="left" alt="image" border="0" hspace="0" src="http://ui-dev.reslynx.com/img/mail/man.png" height="32" width="32" style="display: block;" vspace="0"></td><td>Mr Roofus Summers</td><td style="text-align:center"><b>16 August 1987 (28)</b></td><td style="text-align:center"><b><span style="color:#2a8fbd;">$292.11</span></b></td></tr><td colspan="3" style="border-top:1px solid #E3E8EA;text-align:right;">
<b>Total</b>
</td>
<td style="border-top:1px solid #E3E8EA;text-align:center;">
<b><span style="color:#2a8fbd;">$292.11</span></b>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="bottom">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:2px; line-height:2px;"><img alt="" height="20" src="http://ui-dev.reslynx.com/img/mail/shadow620.gif" width="620" border="0" style="display:block;"></td>
</tr>
</table>
<!--End of three content container - row#4-->
<!--Start of footer container-->
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td bgcolor="#f4f4f4" height="5" style="font-size:2px; line-height:0px;" valign="top">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopLeft2.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopRight2.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" style="padding:12px 20px 12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<table width="580" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; border-width:0;">
<tr>
<td width="180" valign="top" style="padding:0 20px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<table width="180" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; border-width:0;">
<tr>
<td valign="top" width="20" style="padding:0 0 0 0; line-height:100%;"><img border="0" alt="Home:" height="12" src="http://ui-dev.reslynx.com/img/mail/homeIcon.gif" width="11"></td>
<td width="160" style="padding:0 0 10px 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#999999;" valign="top">
<a href="#" style="border-bottom:1px #777777 dotted; text-decoration:none; color:#777777;">www.website.com</a></td>
</tr>
<tr>
<td valign="top" width="20" style="padding:2px 0 0 0; line-height:100%;"><img border="0" alt="Email:" height="9" src="http://ui-dev.reslynx.com/img/mail/emailIcon.gif" width="12"></td>
<td width="160" style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#999999;" valign="top">
<a href="mailto:#" style="border-bottom:1px #777777 dotted; text-decoration:none; color:#777777;">[email protected]</a></td>
</tr>
</table>
</td>
<td width="180" valign="top" style="padding:0 20px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<table width="180" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; border-width:0;">
<tr>
<td valign="top" width="16" style="padding:1px 0 0 1px; line-height:100%;"><img border="0" alt="Phone:" height="10" src="http://ui-dev.reslynx.com/img/mail/phoneIcon.gif" width="7"></td>
<td width="160" style="padding:0 0 10px 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#777777;" valign="top">
1.234.567.8901</td>
</tr>
<tr>
<td valign="top" width="16" style="padding:3px 0 0 1px; line-height:100%;"><img alt="-" height="7" src="http://ui-dev.reslynx.com/img/mail/arrow2.gif" width="7" border="0"></td>
<td width="160" style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#999999;" valign="top">
<a href="#" style="border-bottom:1px #777777 dotted; text-decoration:none; color:#777777;">Manage subscription</a></td>
</tr>
</table>
</td>
<td width="180" valign="top" style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#F4F4F4" height="5" style="font-size:2px; line-height:0px;" valign="bottom">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomLeft2.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomRight2.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:2px; line-height:2px;"><img alt="" height="20" src="http://ui-dev.reslynx.com/img/mail/shadow620.gif" width="620" border="0" style="display:block;"></td>
</tr>
</table>
<!--End of footer container-->
</td>
</tr>
<!-- End of main container -->
</table>
</body>
</html>
I believe it may have been due to some validation errors:
1.) Most important was you were missing a <tr>
tag, which may have been causing the weird behavior. If the HTML is off, most pre-processors will try to solve it how they think it should be solved. This can make something great look like a hot mess. See below for snippet where the TR was missing. It was right before the <td colspan="3" style="border-top:1px solid #E3E8EA;text-align:right;">
<b><span style="color:#2a8fbd;">$292.11</span></b></td></tr><tr><td colspan="3" style="border-top:1px solid #E3E8EA;text-align:right;">
<b>Total</b>
</td>
<td style="border-top:1px solid #E3E8EA;text-align:center;">
<b><span style="color:#2a8fbd;">$292.11</span></b>
</td>
</tr>
2.) You also were using single quotes for some of your span style tags. This is not valid HTML, it won't likely cause major issues, as most processors are forgiving of it - but all HTML attributes should use double quotes for optimum efficiency.