Fun with Microsoft Outlook HTML Email

Anyone who has had the "pleasure" of designing email has probably come to one very poignant conclusion: MS Outlook is terrible at rendering CSS and HTML for emails. The reason for this is that, starting with Outlook 2007, Microsoft thought it would be a reall great idea to stop rendering HTML email with the Internet Explorer engine, and instead render it with the MS Word rendering engine. Yes, you read that correctly: Word handles HTML and CSS for any emails in Outlook.

Thankfully, there are lots of documented workarounds for some common and persistent bugs in Outlook. One of the best is this: using conditional CSS to target specific versionf of Outlook. I'm linking to this great article from Mailchimp for reference.

Here is a basic example for targeting Outlook 2007 and above:


<!--[if gte mso 12]>
    <style type="text/css">
    /* Your Outlook-specific CSS goes here. */
    </style>
<![endif]-->