I'm composing an Email Signature with tables. There is an issue when I'm testing it in older versions of Outlook.
That's how it's rendered
That's how it's supposed to look
It works just fine when I test the actual code with Putsmail, but when I paste in the signature in the email client and send it, it simply breaks. Help, please!
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>HTML Email Template Boilerplate</title>
<style type='text/css'>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
body {
Margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
p {
margin: 0;
padding: 0;
}
@media screen and (max-width:599.98px) {
}
@media screen and (max-width:399.98px) {
}
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
@media (prefers-color-scheme: dark) {
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse!important;}
</style>
<![endif]-->
<!-- FIXES 120 DPI-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="Margin: 0;padding:0;min-width: 100%;background-color:#ffffff;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color: #ffffff !important;}
body, table, p, a, td {font-family:Arial,Helvetica,sans-serif!important;}
</style>
<![endif]-->
<div style="max-width: 600px; background-color: #ffffff;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing:0;
color: #000000;" role="presentation">
<tr>
<td style="padding:0;">
<![endif]-->
<!-- MAIN TABLE START -->
<table align="center" style="border-spacing:0; border-collapse: collapse; color: #000000;
font-family: sans-serif, Arial, Helvetica!important;
background-color: #ffffff; Margin:0; padding: 0;max-width: 600px;" role="presentation">
<tr>
<td style="padding: 50px 0 30px 0; background-color: #f8f8f8;">
<table width="600" style="width: 600px; border-spacing: 0; border-collapse: collapse;" role="presentation">
<tr>
<td width="600" style="width: 600px; padding: 0; font-size: 0; text-align: center; width: 100%; max-width: 600px; display: block;">
<!--[if mso]>
<table width="600" style="border-spacing: 0;border-collapse:collapse; width:600px; display:block;" role="presentation">
<tr>
<td width="300" align="right" valign="middle" style="padding:0;">
<![endif]-->
<table class="column" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; max-width: 300px; display: inline-block;" role="presentation">
<tr>
<td class="padding" style="padding: 10px;">
<table class="content" align="right" style="border-spacing: 0;border-collapse: collapse;" role="presentation">
<tr>
<td style="padding: 0 0 12px 0; font-size: 24px; text-align: right;font-weight: 600;font-family: 'Poppins', Helvetica, Arial,sans-serif !important;">
<span style="font-size: 24px; margin:0;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 600;" class="name">
Firstname Surname
</span>
</td>
</tr>
<tr>
<td style="padding: 0; font-size: 24px; text-align: right;font-weight: 600;font-family: 'Poppins', Helvetica, Arial,sans-serif !important;">
<span style="font-size: 24px; margin:0;color: #FF8672; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 600;" class="job">
Job Title
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td><td width="300" valign="middle" style="padding:0;">
<![endif]-->
<table class="column" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; max-width: 300px; display: inline-block;" role="presentation">
<tr>
<td class="padding" style="padding: 10px">
<table class="content" style="border-spacing: 0;border-collapse: collapse; text-align: left;" role="presentation">
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="mailto:firstname@productprofessionals.com">firstname@productprofessionals.com</a>
</td>
</tr>
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="tel:+61 444 123 456">+61 444 123 456</a>
</td>
</tr>
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="https://productprofessionals.com" target="_blank">productprofessionals.com</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- BOTTOM IMAGE START -->
<tr>
<td style="padding: 0;" cellspacing="0" cellpadding="0">
<table width="100%" style="padding: 0; border-spacing: 0; border-collapse: collapse;" role="presentation" cellspacing="0" cellpadding="0">
<img src="https://i.ibb.co/CnTF0HJ/Group-584-4.png" width="640" style="width: 640px; display: block;" border="0" alt="Association of Product Professionals">
</table>
</td>
</tr>
<!-- BOTTOM IMAGE END -->
</table>
<!-- MAIN TABLE END -->
<!--[if mso 9] | (IE)>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>