Outlook rendering/layout bug issue thingy

So after spending more than 3 years doing this email template coding life, for me, I may have figured out how to get rid of how Outlook 2007/10 handles laying out table rows with linked images.
As we all know, Outlook 2007/10 renders unpredictably and can cause count-less hours of coding stress and horrors for not only you but your clients as well. What I found may not be a surprise for more seasoned email coders, but for newbies and those who are in and out of Web & Email coding enviroments, this may ease the pain.

Start using the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> for your DOCTYPE setting. I know it goes against what has been previously tested, however, it's the most forgiving of the DOCTYPEs and that's what we want.
Instead of using a main table with TR TD, try ending one TABLE and starting a new TABLE.
Limit the extra align="" rules to only the TD that you need to have specific positioning inside that TABLE.

Here is a link to see the HTML code: http://d.pr/jxVO

Comments? Suggestions? GO!

roshodgekiss roshodgekiss, 5 years ago

Hi Frederick! These are awesome observations you have here - if I was starting out, I'd be particularly glad to receive the one on align= tags, as this caused me heaps of grief in the past... And loads of folks here report troubles with it, too!

Your post comes at a great time, as I was just asked the other day to test doctypes again. The recommendation has been to use XHTML Strict (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">), however if it's causing troubles in Outlook, then it may not be ideal. Note that there's some really good info on using doctypes on the Email on Acid blog - I'll be in touch if I come up with any additional information.

Mind me asking, what issues did you experience when using one table for layouts, which was then resolved by using different tables for each row?

Thanks, Frederick - we really appreciate you sharing your findings with other email designers. Have a rad weekend ahead!

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
oneblackcrayon oneblackcrayon, 5 years ago

Hi Ros!
Due to the client's request, I cannot share the email template code publicly however, I am allowed to share via email or secure link. Simply put when I used a containing TABLE with TR/TDs to keep all sections together, Outlook 2007/10 would have large areas of space between TR/TDs that had linked images. Another rendering issue was with a TR/TD + DIV with inline styles issue that make the DIV area collapse and smaller in width.

I can send screenshots & code of before and afters to an email address.

roshodgekiss roshodgekiss, 5 years ago

Hi Frederick, thanks for your email. I'll take a look and respond shortly.

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free