G
gary.page
Guest
Hello,
Below is my code for creating an HTML Email Signature in Outlook, which has been an exhaustive process, have tried
so many variations and iterations, and still it will not display correctly.
Finally got all the positioning correct, but there is a block of text under the name and position that is NOT
showing, and I cannot see any reason why not.
This has been a real pain in the butt, I'm not going to lie, in Chrome and everything else is renders perfectly, but
Outlook, just seems to do what it wants with no reason or rhyme.
Can someone help, please, I'm at my wits end...
Thanks, Gary
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns
="urn:schemas-microsoft-comfficeffice">
<head>
<title> </title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o
ixelsPerInch>96</oixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-33-333333333333336 {
width: 33.333333333333336% !important;
max-width: 33.333333333333336%;
}
.mj-column-per-25 {
width: 30% !important;
max-width: 30%;
}
.mj-column-per-50 {
width: 40% !important;
max-width: 40%;
}
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
</head>
<body>
<div >
<!--[if mso | IE]>
<tablealign="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
<tr>
<td style="line-height:0px;font-size:0px;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:200px;">
<![endif]-->
<div mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="center"
style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:200px;">
<img height="auto"
src="https://www.pensions-pmi.org.uk/email/img-castle.jpg"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
width="200" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:200px;">
<![endif]-->
<div mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:20px 10px 0;word-break:break-word;">
<div
style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;color:#000000;">
Lesley Alexander</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0 10px 20px;word-break:break-word;">
<div
style="font-family:helvetica;font-size:16px;line-height:1;text-align:left;color:#000000;">
Vice President</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div
style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
<a href="tel:07971391312" style="color:#000000;text-decoration:none;">07971391312</a>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div
style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
<a href="mailto:lesleyalexander@pmi.com" style="color:#000000;text-decoration:none;">lesleyalexander@pmi.com</a>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
<a href="www.pensions-pmi.org.uk" target="_blank" style="color:#000000;text-decoration:none;">www.pensions-pmi.org.uk</a>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
Floor 20, Tower 42, 25 Old Broad Street
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
London, EC2N 1HQ
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:200px;">
<![endif]-->
<div mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="right"
style="font-size:0px;padding:20px 5px 5px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td align="right" style="padding-right:10px">
<a href="https://twitter.com/PMIPensions" target="_blank">
<img height="auto"
src="https://www.pensions-pmi.org.uk/email/img-twitter.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
width="20" />
</a>
</td>
<td align="right" >
<a href="https://www.linkedin.com/company/pensionsmanagementinstitute/" target="_blank">
<img height="auto"
src="https://www.pensions-pmi.org.uk/email/img-linked-in.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
width="20" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center"
style="font-size:0px;padding:5px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td>
<img height="auto"
src="https://www.pensions-pmi.org.uk/email/coat-of-arms-full.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
width="150" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
Continue reading...
Below is my code for creating an HTML Email Signature in Outlook, which has been an exhaustive process, have tried
so many variations and iterations, and still it will not display correctly.
Finally got all the positioning correct, but there is a block of text under the name and position that is NOT
showing, and I cannot see any reason why not.
This has been a real pain in the butt, I'm not going to lie, in Chrome and everything else is renders perfectly, but
Outlook, just seems to do what it wants with no reason or rhyme.
Can someone help, please, I'm at my wits end...
Thanks, Gary
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns
="urn:schemas-microsoft-comfficeffice"><head>
<title> </title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o
ixelsPerInch>96</oixelsPerInch></o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-33-333333333333336 {
width: 33.333333333333336% !important;
max-width: 33.333333333333336%;
}
.mj-column-per-25 {
width: 30% !important;
max-width: 30%;
}
.mj-column-per-50 {
width: 40% !important;
max-width: 40%;
}
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
</head>
<body>
<div >
<!--[if mso | IE]>
<tablealign="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
<tr>
<td style="line-height:0px;font-size:0px;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:200px;">
<![endif]-->
<div mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="center"
style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:200px;">
<img height="auto"
src="https://www.pensions-pmi.org.uk/email/img-castle.jpg"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
width="200" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:200px;">
<![endif]-->
<div mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:20px 10px 0;word-break:break-word;">
<div
style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;color:#000000;">
Lesley Alexander</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0 10px 20px;word-break:break-word;">
<div
style="font-family:helvetica;font-size:16px;line-height:1;text-align:left;color:#000000;">
Vice President</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div
style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
<a href="tel:07971391312" style="color:#000000;text-decoration:none;">07971391312</a>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div
style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
<a href="mailto:lesleyalexander@pmi.com" style="color:#000000;text-decoration:none;">lesleyalexander@pmi.com</a>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
<a href="www.pensions-pmi.org.uk" target="_blank" style="color:#000000;text-decoration:none;">www.pensions-pmi.org.uk</a>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
Floor 20, Tower 42, 25 Old Broad Street
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:7px 10px;word-break:break-word;">
<div style="font-family:helvetica;font-size:9px;line-height:0;text-align:left;color:#000000;">
London, EC2N 1HQ
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:200px;">
<![endif]-->
<div mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="right"
style="font-size:0px;padding:20px 5px 5px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td align="right" style="padding-right:10px">
<a href="https://twitter.com/PMIPensions" target="_blank">
<img height="auto"
src="https://www.pensions-pmi.org.uk/email/img-twitter.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
width="20" />
</a>
</td>
<td align="right" >
<a href="https://www.linkedin.com/company/pensionsmanagementinstitute/" target="_blank">
<img height="auto"
src="https://www.pensions-pmi.org.uk/email/img-linked-in.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
width="20" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center"
style="font-size:0px;padding:5px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td>
<img height="auto"
src="https://www.pensions-pmi.org.uk/email/coat-of-arms-full.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
width="150" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
Continue reading...