Reputation: 188
HTML email template is getting messed up in outlook windows
I am trying to create a simple email template and it's working fine on most of the platforms except the very famous outlook on windows7. It should look like this image
but it looks like in outlook(2003,07,13) on windows 7/10.
I have tried to read a lot of material and followed the rules. But in outlook nothing seems to be working. My table content is left aligned in outlook and images have a lot of space in between.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="telephone=no" name="format-detection">
<meta content="date=no" name="format-detection">
<meta content="address=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta content="link=no" name="format-detection">
<meta name="x-apple-disable-message-reformatting">
<style>
* {
margin:0;
padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
img {
max-width: 100%;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
}
table.body-wrap { width: 100%;}
p {
font-weight: normal;
font-size:14px;
line-height:1.6;
}
.container {
display:block!important;
max-width:600px!important;
margin:0 auto!important;
clear:both!important;
}
.content {
padding:0px 15px;
max-width:600px;
margin:0 auto;
display:block;
}
.content table { width:100%; }
@media screen and (max-width:600px) {
table td img {
width:100% !important;
display:block !important;
}
table td, table td div {
padding:0 0 20px 0 !important;
display:block !important;
}
.deviceWidth {width:440px!important;}
.center {text-align:center!important;}
}
@media only screen and (max-width:479px) {
.deviceWidth {width:280px!important; padding:0;}
.center {text-align:center!important;}
}
</style>
</head>
<body bgcolor="#FFFFFF" style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none; width: 100%!important; height: 100%;margin: 0; min-width: 100%; padding: 0; width: 100%;">
<!-- BODY -->
<table class="body-wrap" border="0" cellpadding="0" cellspacing="0" width="100%" class="body" align="center" style="margin:0 auto;border-collapse: collapse; border-spacing: 0; max-width: 100%; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; width: 100%;">
<tbody>
<tr style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; vertical-align: top;">
<td class="container" bgcolor="#FFFFFF" style="display:block!important;max-width:600px!important;margin:0 auto!important;clear:both!important;">
<center class="content" data-parsed="" style="min-width: 664px; width: 100%;">
<table border="0" width="664" cellpadding="0" cellspacing="0" align="center" class="container float-center deviceWidth" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; margin: 0 auto; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; width: 664px;">
<tbody>
<tr style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: top;">
<td class="contained" style="border-collapse: collapse; border-spacing: 0; color: #474747; font-family: Arial,sans serif; font-size: 12px; font-weight: 400; line-height: 1.4; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left;">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="container deviceWidth" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; margin: 0 auto;">
<tr>
<td>
<div style="padding-bottom: 20px;">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" class="container deviceWidth" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; margin: 0 auto;">
<tr>
<td>
<div style="padding-bottom: 20px;padding-right:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
<td>
<div style="padding-bottom: 20px;padding-left:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" class="container deviceWidth" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; margin: 0 auto;">
<tr>
<td>
<div style="padding-right:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
<td>
<div style="padding-left:10px;padding-right:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
<td>
<div style="padding-left:10px;">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table><!-- Main table ends -->
</body>
</html>Upvotes: 1
Views: 415
Answers (1)
Reputation: 3537
Outlook is working just fine. You're just sending it a bunch of mixed signals and you're unhappy with the results.
The easiest thing to do would be start over because your code is such a mess I don't know where to begin.
In this table, you have two classes in separate class declarations. Outlook will ignore max-width and width: 100%. If you want to set the width, add: <table width="600"> to start the table. In some places you declare the size to be 664px, other places 600. Choose one and stick with it.
<table class="body-wrap" border="0" cellpadding="0" cellspacing="0"
width="100%" class="body" align="center" style="margin:0 auto;
border-collapse: collapse; border-spacing: 0; max-width: 100%;
mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; width: 100%;">
The three images you have along the bottom are all sized 600px wide. That's not going to fit in a 600px box. Try resizing them to 180px-200px to work with the padding you added. You're not declaring the width on the <td> cells, so Outlook is filling up the full screen since it has nothing to reign it in.
Outlook does not understand <div> completely. You have to declare the width to ensure it properly renders them.
<td>
<div style="padding-left:10px;padding-right:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
Like I said, it's most likely easier to start over.
Good luck.
Upvotes: 1
Related Questions
- HTML: Outlook not rendering correctly email
- Html email template not working outlook
- HTML Format in Outlook Email Incorrect
- HTML not format correctly in outlook
- Wrong display of html e-mail in Outlook
- HTML e-mail not displaying correctly in Outlook 2013
- HTML template for email not rendering as expected
- HTML layout is messed up in Microsoft Outlook E-mail client
- HTML Email behaving strange in Outlook
- My html template is messed up in outlook