So the problem is with the footer, most of it is done with tables because Outlook renders using Words engine. So they sent me this so I can fix it, looking online it seems that for Outlook your code should be mostly done with tables and inline CSS and almost whole of it is, so now I can’t figure out what should I do to fix it…
I think the problem is coming from having a
div within your conditional Outlook code.
<!--[if (gte mso 9)|(IE)]> <table width="100%" style="border-spacing: 0;font-family: sans-serif;color: #333333;border-collapse:collapse;"> <tr style="background-color:#6d6e71;"> <![endif]--> <div style="background-color: #6d6e71;border-radius:5px;height: 100%;" bgcolor="#6d6e71"> <!--[if (gte mso 9)|(IE)]> <td width="150" valign="top" style="padding:0;"> <![endif]-->
This won’t be valid HTML in Outlook as it’ll come out as
I’d suggest adding a
td to the outer conditional (around the div), then adding
table tr inside the div to create another table for you 3 columns.
(section-title-8 is a good example of how you’d want the inner columns laid out)
You also have this same layout issue in your header.
Another small improvement would be to add
cellspacing="0" cellpadding="0" border="0" to all of your tables. This helps remove all gaps and spaces between them\between cells.
Outlook does not support
max-width, you can leave it in the styles but you’ll also need to add a
width attribute on the element.
One last thing, this email is HUGE. It’s going to be clipped/cut off by a lot of email clients and might end up triggering spam filters.
Email is damn hard, so i salute you for stepping into this world. If you get stuck check out the Litmus community forum and Stackoverflow (search for html-email)