HTML email template is getting messed up in outlook windows
1
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>html-email
edited Jan 1 at 23:09
Syfer
2,63421123
asked Dec 23 '18 at 13:13
G VinitaG Vinita
356
add a comment |
1
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>html-email
edited Jan 1 at 23:09
Syfer
2,63421123
asked Dec 23 '18 at 13:13
G VinitaG Vinita
356
add a comment |
1
1
1
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>html-email
edited Jan 1 at 23:09
Syfer
2,63421123
asked Dec 23 '18 at 13:13
G VinitaG Vinita
356
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><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><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>html-email
html-email
edited Jan 1 at 23:09
Syfer
2,63421123
asked Dec 23 '18 at 13:13
G VinitaG Vinita
356
edited Jan 1 at 23:09
Syfer
2,63421123
asked Dec 23 '18 at 13:13
G VinitaG Vinita
356
edited Jan 1 at 23:09
Syfer
2,63421123
edited Jan 1 at 23:09
Syfer
2,63421123
edited Jan 1 at 23:09
Syfer
2,63421123
2,63421123
asked Dec 23 '18 at 13:13
G VinitaG Vinita
356
asked Dec 23 '18 at 13:13
G VinitaG Vinita
356
asked Dec 23 '18 at 13:13
G VinitaG Vinita
356
356
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
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.
answered Dec 24 '18 at 21:33
gwallygwally
1,7072617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53903905%2fhtml-email-template-is-getting-messed-up-in-outlook-windows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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.
answered Dec 24 '18 at 21:33
gwallygwally
1,7072617
add a comment |
1
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.
answered Dec 24 '18 at 21:33
gwallygwally
1,7072617
add a comment |
1
1
1
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.
answered Dec 24 '18 at 21:33
gwallygwally
1,7072617
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.
answered Dec 24 '18 at 21:33
gwallygwally
1,7072617
edited Jan 2 at 5:46
answered Dec 24 '18 at 21:33
gwallygwally
1,7072617
answered Dec 24 '18 at 21:33
gwallygwally
1,7072617
answered Dec 24 '18 at 21:33
gwallygwally
1,7072617
1,7072617
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53903905%2fhtml-email-template-is-getting-messed-up-in-outlook-windows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
