Problems with Outlook rendering HTML

Problems with Outlook rendering HTML
0

#1

Code, you can click preview in the top left to see how it looks

Screenshot of how it looks on Outlook 2013

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…


#2

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
<table><tr><div><td>

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)