I am programming an email-signature.
When forwarded the lower bit is being pulled apart.
The code may look a little messy, since it’s a mix of my own coding and the results of a figma plugin.
I want the signature to be displayed in dark mode (so inverted basically) and in both desktop and mobile view. It works.
It should work with every email provider. The ripping apart of the lower elements occurs in Outlook (have not tried others yet).
I know Outlook is the final villain regarding signature display, but that’s what everyone in the company uses.
I know that emails weren’t designed for images, and imagery and complex layout will always cause problems but I need to realize this particular design (or close).
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<body class="darkmode" width="396px" height="302.63">
<table bgcolor="transparent" border="0" cellpadding="0" cellspacing="0" width="396px" style="background:transparent;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tr>
<td align="left" style="padding: 0;">
<div class="emailify" style="mso-line-height-rule:exactly;mso-hyphenate:none;word-spacing:normal;"><div class="bg " lang="en" dir="auto">
<!--[if mso | IE]>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="r-outlook -outlook pt-14-outlook pr-16-outlook pl-16-outlook s-17-outlook -outlook" role="presentation" style="width:396.6827697753906px;" width="396"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<![endif]--><div class="r pt-14 pr-16 pl-16 s-17" style="background:none;background-color:none;margin:0px;max-width:396.6827697753906px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:none;background-color:none;width:396px;"><tbody><tr><td style="border:none;direction:ltr;font-size:0;padding:9px 0px 0px 0px;text-align:left;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class style="width:396px;">
<![endif]--><div class="pc100 ogf" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:396px;direction:ltr;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation"><tr><td style="vertical-align:top;width:157px;">
<![endif]--><div class="pc39-8303 ogf m c" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:39.8303%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="border:none;vertical-align:top;padding:3px 0px 3px 0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%"><tbody><tr><td align="left" class="i" style="font-size:0;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0;"><tbody><tr><td style="width:157px;"> <img alt src="YOUR_URL_HERE" style="border:0;border-radius:11px 11px 11px 11px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="157" height="auto">
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td><td style="vertical-align:top;width:19px;">
<![endif]--><div class="pc4-9914 ogf g" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:4.9914%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%"><tbody></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td><td style="vertical-align:top;width:217px;">
<![endif]--><div class="pc54-9558 ogf c" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:54.9558%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:none;vertical-align:top;" width="100%"><tbody><tr><td align="left" class="x fs-16 ls-0 m" style="font-size:0;padding-bottom:2.731034517288208px;word-break:break-word;"><div style="text-align:left;"><p style="Margin:0;text-align:left;mso-line-height-alt:24px;mso-ansi-font-size:20px;"><span style="font-size:20px;font-family:'Arial',sans-serif;font-weight:700;color:none;line-height:115%;letter-spacing:-1px;mso-line-height-alt:24px;mso-ansi-font-size:20px;">Vorname Nachname</span></p></div>
</td></tr><tr><td align="left" class="x fs-13 m" style="font-size:0;padding-bottom:2.731034517288208px;word-break:break-word;"><div style="text-align:left;"><p style="Margin:0;text-align:left;mso-line-height-alt:18px;mso-ansi-font-size:14px;"><span style="font-size:14px;font-family:'Arial',sans-serif;font-weight:400;color:#878787;line-height:121%;mso-line-height-alt:18px;mso-ansi-font-size:14px;">Kundenberatung</span></p></div>
</td></tr><tr><td class="s h-2 m" style="font-size:0;padding:0;padding-bottom:2.731034517288208px;word-break:break-word;" aria-hidden="true"><div style="height:4px;line-height:4px;"> </div>
</td></tr><tr><td align="left" class="x fs-10 m" style="font-size:0;padding-bottom:2.731034517288208px;word-break:break-word;"><div style="text-align:left;"><p style="Margin:0;text-align:left;mso-line-height-alt:16px;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Arial',sans-serif;font-weight:400;color:none;line-height:136%;text-decoration:underline;mso-line-height-alt:16px;mso-ansi-font-size:12px;">[email protected]</span></p><p style="Margin:0;mso-line-height-alt:16px;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Arial',sans-serif;font-weight:400;color:none;line-height:136%;text-decoration:none;mso-line-height-alt:16px;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:400;color:none;line-height:136%;text-decoration:underline;mso-line-height-alt:16px;mso-ansi-font-size:12px;">+49 (0) 302 575 78-47</span></span></p></div>
</td></tr><tr><td class="s h-2 m" style="font-size:0;padding:0;padding-bottom:2.731034517288208px;word-break:break-word;" aria-hidden="true"><div style="height:4px;line-height:4px;"> </div>
</td></tr><tr><td align="left" class="x fs-10 m" style="font-size:0;padding-bottom:2.731034517288208px;word-break:break-word;"><div style="text-align:left;"><p style="Margin:0;text-align:left;mso-line-height-alt:16px;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Arial',sans-serif;font-weight:400;color:none;line-height:136%;mso-line-height-alt:16px;mso-ansi-font-size:12px;">www.x-press.de</span></p></div>
</td></tr><tr><td class="s h-2 m" style="font-size:0;padding:0;padding-bottom:2.731034517288208px;word-break:break-word;" aria-hidden="true"><div style="height:5px;line-height:5px;"> </div>
</td></tr><tr><td align="left" class="x fs-10 m" style="font-size:0;padding-bottom:2.731034517288208px;word-break:break-word;"><div style="text-align:left;"><p style="Margin:0;text-align:left;mso-line-height-alt:16px;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Arial',sans-serif;font-weight:400;color:none;line-height:136%;mso-line-height-alt:16px;mso-ansi-font-size:12px;">X-Press Grafik & Druck GmbH</span></p><p style="Margin:0;mso-line-height-alt:16px;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Arial',sans-serif;font-weight:400;color:none;line-height:136%;mso-line-height-alt:16px;mso-ansi-font-size:12px;">Nunsdorfer Ring 13, 12277 Berlin</span></p></div>
</td></tr><tr><td class="s h-2 m" style="font-size:0;padding:0;padding-bottom:2.731034517288208px;word-break:break-word;" aria-hidden="true"><div style="height:6px;line-height:6px;"> </div>
</td></tr><tr><td align="left" class="o s-2" style="font-size:0;padding:0;padding-bottom:0;word-break:break-word;">
<!--[if mso | IE]>
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation"><tr><td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tbody><tr class="e ah w-60 m"><td style="padding:0 1.365517258644104px 0 0;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:93px;"><tbody><tr><td style="font-size:0;height:21px;vertical-align:middle;width:93px;"> <a href="YOUR_URL_HERE" target="_blank"> <img alt="Website" height="21" src="YOUR_URL_HERE" style="display:block;" width="93"></a>
</td></tr></tbody></table>
</td></tr></tbody></table>
<!--[if mso | IE]>
</td><td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tbody><tr class="e ah w-16 m"><td style="padding:0 1.365517258644104px 0 0;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:21px;"><tbody><tr><td style="font-size:0;height:22px;vertical-align:middle;width:21px;"> <a href="YOUR_URL_HERE" target="_blank"> <img alt="Instagram" height="22" src="YOUR_URL_HERE" style="display:block;" width="21"></a>
</td></tr></tbody></table>
</td></tr></tbody></table>
<!--[if mso | IE]>
</td><td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tbody><tr class="e ah w-16 m"><td style="padding:0 1.365517258644104px 0 0;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:22px;"><tbody><tr><td style="font-size:0;height:22px;vertical-align:middle;width:22px;"> <a href="YOUR_URL_HERE" target="_blank"> <img alt="facebook" height="22" src="YOUR_URL_HERE" style="display:block;" width="22"></a>
</td></tr></tbody></table>
</td></tr></tbody></table>
<!--[if mso | IE]>
</td><td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tbody><tr class="e ah w-16 "><td style="padding:0;padding-right:0;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:21px;"><tbody><tr><td style="font-size:0;height:22px;vertical-align:middle;width:21px;"> <a href="YOUR_URL_HERE"> <img alt="Website" height="22" src="YOUR_URL_HERE" style="display:block;" width="21"></a>
</td></tr></tbody></table>
</td></tr></tbody></table>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td><td style="vertical-align:top;width:0;">
<![endif]--><div class="pc0-1721 ogf" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:0.1721%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="396px"><tbody><tr><td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="396px"><tbody></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]--></div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td></tr></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="r-outlook -outlook pt-3-outlook pr-16-outlook pl-16-outlook -outlook" role="presentation" style="width:396.6827697753906px;" width="396"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<![endif]--><div class="r pt-3 pr-16 pl-16" style="background:none;background-color:none;margin:0px;max-width:396.6827697753906px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:none;background-color:none;width:396px;"><tbody><tr><td style="border:none;direction:ltr;font-size:0;padding:0;text-align:left;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="c-outlook -outlook -outlook" style="vertical-align:top;width:396px;">
<![endif]--><div class="xc396 ogf c" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:396px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:none;vertical-align:top;" width="396px"><tbody><tr><td class="s m" style="font-size:0;padding:0;padding-bottom:6.8275861740112305px;word-break:break-word;" aria-hidden="true"><div style="height:7px;line-height:7px;"> </div>
</td></tr><tr><td align="center" class="d" style="font-size:0;padding:0;padding-bottom:0;word-break:break-word;"><p style="border-top:solid 1px #878787;font-size:1px;margin:0px;width:396px;"></p>
<!--[if mso | IE]>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #878787;font-size:1px;margin:0px;width:396px;" role="presentation" width="396px"><tr><td style="height:0;line-height:0;">
</td></tr></table>
<![endif]-->
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td><td class style="vertical-align:top;width:0;">
<![endif]--><div class="xc0 ogf" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%"><tbody></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td></tr></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="r-outlook -outlook pt-10-outlook pr-16-outlook pb-9-outlook pl-16-outlook -outlook" role="presentation" style="width:396.6827697753906px;" width="396"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<![endif]--><div class="r pt-10 pr-16 pb-9 pl-16" style="background:none;background-color:none;margin:0px;max-width:396.6827697753906px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:none;background-color:none;width:396px;"><tbody><tr><td style="border:none;direction:ltr;font-size:0;padding:6px 0px 6px 0px;text-align:left;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class style="width:396px;">
<![endif]--><div class="pc100 ogf" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:396px;direction:ltr;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation"><tr><td style="vertical-align:middle;width:35px;">
<![endif]--><div class="pc9-0753 ogf m c pt-0 pr-0 pb-0 pl-0" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:9.0753%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="border:none;vertical-align:middle;padding:3px 0px 0px 0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%"><tbody><tr><td align="left" class="o" style="font-size:0;padding:0;word-break:break-word;">
<!--[if mso | IE]>
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation"><tr><td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tbody><tr class="e "><td style="padding:0;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:34px;"><tbody><tr><td style="font-size:0;height:26px;vertical-align:middle;width:34px;"> <a href="YOUR_URL_HERE" target="_blank"> <img alt="FSC Zertifizierung" height="26" src="YOUR_URL_HERE" style="display:block;" width="34"></a>
</td></tr></tbody></table>
</td></tr></tbody></table>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td></tr></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td><td style="vertical-align:top;width:8px;">
<![endif]--><div class="pc2-0654 ogf g" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:2.0654%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%"><tbody></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td><td style="vertical-align:middle;width:335px;">
<![endif]--><div class="pc84-7024 ogf c pl-15" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:84.7024%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="border:none;vertical-align:middle;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%"><tbody><tr><td align="left" class="x fs-8 lh-11" style="font-size:0;word-break:break-word;"><div style="text-align:left;"><p style="Margin:0;text-align:left;mso-line-height-alt:10px;mso-ansi-font-size:8px;"><span style="font-size:8px;font-family:'Arial',sans-serif;font-weight:400;color:#878787;line-height:125%;mso-line-height-alt:10px;mso-ansi-font-size:8px;">Unser Plus an Nachhaltigkeit für alle: <br class="sb">50% des Strombedarfs durch eigene Fotovoltaik, Mineralölfreie Biofarben & chemiefreie Druckplatten. Unser Upgrade auf Wunsch: FSC® Zertifizierung, Climate Partner.</span></p></div>
</td></tr></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td><td style="vertical-align:top;width:15px;">
<![endif]--><div class="pc3-9535 ogf" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:3.9535%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%"><tbody></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]--></div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td></tr></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="r-outlook -outlook pt-0-outlook pr-16-outlook pb-0-outlook pl-16-outlook -outlook" role="presentation" style="width:396.6827697753906px;" width="396"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<![endif]--><div class="r pt-0 pr-16 pb-0 pl-16" style="background:none;background-color:none;margin:0px;max-width:396.6827697753906px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:none;background-color:none;width:396px;"><tbody><tr><td style="border:none;direction:ltr;font-size:0;padding:0;text-align:left;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="c-outlook -outlook -outlook" style="vertical-align:top;width:396px;">
<![endif]--><div class="xc396 ogf c" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:396px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:none;vertical-align:top;" width="396px"><tbody><tr><td align="center" class="d m" style="font-size:0;padding:0;padding-bottom:6.8275861740112305px;word-break:break-word;"><p style="border-top:solid 1px #878787;font-size:1px;margin:0px;width:396px;"></p>
<!--[if mso | IE]>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #878787;font-size:1px;margin:0px;width:396px;" role="presentation" width="396px"><tr><td style="height:0;line-height:0;">
</td></tr></table>
<![endif]-->
</td></tr><tr><td class="s" style="font-size:0;padding:0;padding-bottom:0;word-break:break-word;" aria-hidden="true"><div style="height:7px;line-height:7px;"> </div>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td><td class style="vertical-align:top;width:0;">
<![endif]--><div class="xc0 ogf" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:396px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="396px"><tbody><tr><td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="396px"><tbody></tbody></table>
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td></tr></tbody></table></div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]--></div>
</div>
</td>
</tr>
</table>
<br>
</body>
I tried to define everything width-related absolute, so no %-values only px-values. At least where the width should define the width of the overall signature (which the elements that cause trouble should fill).
That works, or actually is necessary for the signature to display correctly in the first place. If I don’t do that (and use the %-values instead) it will already get ripped apart when received. Now it displays correctly when received, that problem occurs when forwarded.
xpress is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Forwarding an email forces a different render, every time.
This is because when an email is received for the first time, an email client, such as Outlook, interprets the code and makes adjustment for security measures such as removing certain HTML and CSS tags, as well as adding code such as styling. (For signature making, this occurs at the point of inserting the signature into the email, i.e. before sending – as opposed to sending bulk mail through e.g. MailChimp)
So once you forward that email, you necessarily forward all those adjustments. This is unavoidable.
Furthermore, when it’s received by the second email client, that will make its own adjustments as per the first time. So it might appear worse still, since if it’s a different program, it now will complain about other matters.
This too is unavoidable. It’s how email works.
If it works from Outlook Windows desktop to other Outlooks in the company, that’s expected. If it breaks down from Outlook sent externally (to e.g. Gmail), that’s also expected, as Outlook will render the email according to how it thinks it should look in its Outlook environment, before sending on.
I.e. there’s issues even with sending on, not just forwarding.
You may need to drastically simplify.
Having said all that, a 396px width isn’t too bad (mobiles can be smaller), and it’s a table, which Outlook likes.
I’d suggest trying width attributes without the “px”, i.e. just have width=”396″, as the width=”396px” is not supported by Outlook. (It accepts “%” but not other units.)
Also for the line, <p style="border-top:solid 1px #878787;font-size:1px;margin:0px;width:396px;"></p>
put a non-breaking space in it, as Outlook looks to be collapsing it, and also line-height of 1. I.e.:
<p style="border-top:solid 1px #878787;font-size:1px;margin:0px;width:396px;line-height:1px"> </p>
You would almost certainly be better off re-writing your code as a straight simple table, although you haven’t given us the classes so I’m not sure if you’re doing some tricks for mobiles?