My HTML Email Template is not showing properly on Outlook?

Copper Contributor
 
Hi, I'm ceating a E-mail Template with HTML and CSS and want to send later on Outlook on the email body. Sadly my containers don't look the way I coded them on Outlook, after some indications I changed some aspects of my code but still of all my template this is the only problematic area (check pictures). I don't know what to do anymore and I don't understand why things are not in their right place. Do I have a problem with my code? Thanks for all the help!
 
How my Template is looking like on Microsft Edge and ChromeHow my Template is looking like on Microsft Edge and ChromeHow the template is looking like on OutlookHow the template is looking like on Outlook
 *My HTML
 

 

</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%">
<tbody>
<tr>
<td align="center" style="padding:0;Margin:0">
<table bgcolor="#ffffff" class="es-content-body" align="center" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600">
<tbody>
<tr>
<td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px;padding-right:20px">

<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tbody>
<tr>
<td width="173.33333333333334" class="es-m-p0r es-m-p20b" align="center" style="padding:0;Margin:0">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff3ec" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#fff3ec" role="presentation">
<tbody>
<tr>
<td align="left" style="padding:0;Margin:0;font-size:0px;background:transparent;z-index:100;position:relative;bottom:18px;left:12px">
<img class="adapt-img" alt="" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="55" src="https://vynrxq.stripocdn.email/content/guids/CABINET_9ed660af53f855fef922f0ff294037ff/images/new_2.png"></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-left:10px;padding-right:10px; background:#fff3ec">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:17px;color:#000000;font-size:14px">
<span style="font-family:tahoma, verdana, segoe, sans-serif"><strong>Headline&nbsp;</strong></span><br>
<br>
<span style="font-family:tahoma, verdana, segoe, sans-serif">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
 et ea rebum.</span></p><br><br><br>
</td>
</tr>
<tr>
<td align="left" class="background-color: white" style="padding:0;Margin:0;">

<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:17px;color:#000000;font-size:14px; background: white">
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</td>
</tr>
<tr>
<td align="left" class="background-color: white" style="padding:0;Margin:0;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:17px;color:#000000;font-size:14px;background-color:white">
<br>
<!--2x-->
</p>
</td>
</tr>
<tr>
<td align="left" class="background-color: white" style="padding:0;Margin:0;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:17px;color:#000000;font-size:14px;background-color:white">
</p>
</td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;font-size:0px;background:transparent;z-index:100;position:relative;bottom:18px;left:12px">
<img class="adapt-img" alt="" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="55" src="https://vynrxq.stripocdn.email/content/guids/CABINET_9ed660af53f855fef922f0ff294037ff/images/new_2.png"></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-left:10px;padding-right:10px; background: #fff3ec;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#000000;font-size:14px">
    <strong>Headline 1.5</strong><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span style="font-size:18px"><strong>XXXXXXXX<br>
</strong></span><br>
<br>
<br>
<br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="es-hidden" style="padding:0;Margin:0;width:20"></td>
</tr>
</tbody>
</table>
<!--]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tbody>
<tr>
<td width="173.33333333333334" class="es-m-p20b" align="center" style="padding:0;Margin:0">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff3ec" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#fff3ec" role="presentation">
<tbody>
<tr>
<td align="left" style="padding:0;Margin:0;font-size:0px;background:transparent;z-index:100;position:relative;bottom:18px;left:12px">
<img class="adapt-img" alt="" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="55" src="https://vynrxq.stripocdn.email/content/guids/CABINET_9ed660af53f855fef922f0ff294037ff/images/new_2.png"></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-left:10px;padding-right:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#000000;font-size:14px">
<strong>Headline 1</strong><br>
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p><br><br><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="173.33333333333334" class="es-m-p20b" align="center" style="padding:0;Margin:0">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff3ec" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#fff3ec" role="presentation">
<tbody>
<tr>
<td align="left" class="background-color: white" style="padding:0;Margin:0;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#000000;font-size:14px;background-color:white">
<br>
<br>
<br><!--2x-->
</p>
</td>
</tr>
<tr>
<td align="left" class="background-color: white" style="padding:0;Margin:0;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#000000;font-size:14px;background-color:white">
<br>
<br>
<br>
<br>
</p>
</td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;font-size:0px;background:transparent;z-index:100;position:relative;bottom:18px;left:12px">
<img class="adapt-img" alt="" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="55" src="https://vynrxq.stripocdn.email/content/guids/CABINET_9ed660af53f855fef922f0ff294037ff/images/new_2.png"></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-left:10px;padding-right:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#000000;font-size:14px">
<strong>Headline 2</strong><br>
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<table cellpadding="0" cellspacing="0" class="es-right" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tbody>
<tr>
<td width="173.33333333333334" align="center" style="padding:0;Margin:0">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff3ec" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#fff3ec" role="presentation">
<tbody>
<tr>
<td align="left" style="padding:0;Margin:0;padding-left:10px;padding-right:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#000000;font-size:14px">
<br>
<br>
<br>
<strong>Headline 3</strong><br>
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>
<br>
<strong>Headline 4</strong><br>
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>
<br>
<strong>Headline 5</strong><br>
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>
<br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

 

0 Replies