locked
HTML Email Signature RRS feed

  • Question

  • 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:o="urn:schemas-microsoft-com:office:office"> <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:PixelsPerInch>96</o:PixelsPerInch> </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>

    Tuesday, July 21, 2020 11:27 AM

All replies

  • I should add that when the email is sent, it look perfect, the issue is that it does NOT display correctly in Outlook, which means that the text does not appear and cannot be edited, but when sent, it is shown...
    Tuesday, July 21, 2020 11:48 AM
  • The problem is that you have used "line-height:0" in those disappearing <div> containers. Outlook is only able to interpret the inline styles and is doing exactly what you've told it. Change line-height to 1 and the block with contact information will appear again.

    Office 365 & Exchange Admin's blog - a free collection of tips and tested solutions to make admins' life easier.

    Tuesday, July 21, 2020 12:21 PM
  • Hi Gary ,

    As Adam mentioned above, Outlook is only able to interpret the inline styles. I tried to change the line-height of those disappeared contents to 1 and found that it could show normally as below.

    "Outlook IT Pro Discussions" forum will be migrating to a new home on Microsoft Q&A, please refer to the sticky post for more details.

    Hope this can be helpful.

    Regards,

    Jeff Yang


    "Outlook IT Pro Discussions" forum will be migrating to a new home on Microsoft Q&A! We invite you to post new questions in the new forum.

    For more information, please refer to the sticky post.

    Wednesday, July 22, 2020 1:48 AM
  • Hi ,

    Just checking in to see if above information was helpful. If you have any further updates on this issue, please feel free to post back.

    "Outlook IT Pro Discussions" forum will be migrating to a new home on Microsoft Q&A, please refer to the sticky post for more details.

    Regards,

    Jeff Yang


    "Outlook IT Pro Discussions" forum will be migrating to a new home on Microsoft Q&A! We invite you to post new questions in the new forum.

    For more information, please refer to the sticky post.

    Sunday, July 26, 2020 10:59 AM