Currently I am programming an email-signature, and it’s causing me a lot of pain. My last problem which i can’t seem to solve is the display of the signature when forwarded. Most of the layout is still intact, but the lower bit keeps being pulled apart. See the pictures for what I mean.
Some context: First of all, I am a total newbie to all of this, so please the excuse the messy code and don’t hesitate explaining it for dummies. The code may look a little messy, since it’s a wild mix of my own coding and the results of a figma plugin. Thats why it’s not formated properly, sorry!
Also: I want the signature to be displayed right in dark mode (so inverted basicly) and in both desktop and mobile view. After a lot of revisions it works now, so i am happy with all of that, regardless of the messy code.
And of course it should work with every email provider. The ripping apart of the lower elements gets caused by Outlook (have not tried others yet). Now I know Outlook is the final villain regarding signature display, but apparently that’s what everyone uses in the company. Also, I know that emails weren’t designed for images really, that text-based signatures work best and that imagery and complex layout will always cause problems… but I just need to realize this particular design (or at least close).
So if anyone knows whats causing the issue, I’ll be forever grateful…
Correct
Not Correct
Here’s the code:
<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 trauble should fill).
And 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) i will already get ripped apart when recieved by someone. So now it displays correctly when recieved, that problem only occurs when forwarded.
New contributor
xpress is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.