I am building an HTML email signature for our business email. I have tested it on several modern email clients, and it works after debugging many issues like image sizes, etc. My head is spinning, and I’m unsure what else to do. A new issue has arisen with older Office clients, which insert
tags, add borders everywhere, and break the links wrapped in , resulting in separate and tags, or duplicating the links as seen below. The dividers disappear, and underline styling isn’t respected (this also happens in Gmail, where we don’t want links to be underlined), and the MsoNormal class injects unwanted styling from the Office client. Also due to privacy reasons I put image placeholders, but these works fine.
Codesandbox with the 3 tables code: https://codesandbox.io/p/sandbox/4rkj8m
It was quite long so I had to put it there.
This is how the code looks when copied from our email signature builder [custom made]
How the table looks in Gmail before sending
Broken Email Signature forwarded from an MS Office Client
I have tried using the CSS normalize file, but when building the app in Vite with React, it doesn’t work due to the MSO custom classes. So, I tried organizing things as much as possible into tables and minimizing the use of divs to maintain the styling. I’m also reducing inline styling as much as I can. Additionally, I’m not wrapping the content in HTML or meta tags, even though several email HTML checkers suggest doing so. However, for an email signature, it doesn’t seem necessary to include these tags, does it?
You need to sign in to view this answers
Leave feedback about this