Microsoft Outlook conditional statements

Microsoft Outlook is a place email marketers know and fear. The bugs are well documented and crazy making at times. However, they have also been kind enough to have their own special language which is only understood by them and ignored everywhere else.

A few of these rules can be quite useful in reassuring Microsoft Outlook that everything is OK, rubbing its arm and telling it not to worry as much about the responsive email it has been asked to render.

There are 2 main general statements to target old and new Microsoft Outlook:

<!--[if mso]>
CONTENT
<![endif]-->

and

<!--[if (IE)]>
CONTENT
<![endif]-->

So what we are saying is IF Microsoft Outlook Word rendering engine THEN CONTENT and the 2nd statement is IF Internet Explorer 6 rendering engine THEN CONTENT (Outlook 2007+ use Microsoft word and pre 2007 is IE6). When used together as a double wrap we can target all Microsoft Outlooks.

We can target individual versions to be more specific when tackling bugs. For example, Outlook 2007 is:

<!--[if gte mso 12]>
CONTENT 
<![endif]-->

Here we are saying IF greater than or equal to version 12 THEN CONTENT. We can use lt (less than) lte (less than and equal to) gt (greater than) gte (greater than and equal to) also “!” as NOT. Which we can use to assist in hide/show elements. e.g.

<!--[if !mso]><!-->
CONTENT
<!--<![endif]-->

Note in the example above, we are ending the comment after the statements (<!-->) This is specific to showing and hiding content in this context i.e. if commented out it wont show in NOT MSO – so it would be essentially useless. However, don’t rely on this to hide content as some Outlooks don’t like it, we  would have to style out inline mmkay, to ensure we exclude it from all the Outlooks (exhausting isn’t it?).

A combination of mso-hide:all, display:none; does the trick using a media query to “turn the table back on”. We would also use more things to ensure correct rendering in more places – but that will be a merit a blog post all of it’s own in the near future.

We can use these statements to add content such as fake table structure or indeed specific CSS rules in a <style>. One such generic rule which fixes the td height bug in Outlook 2013 is this (I picked this up from a forum post by a guy called Brian Thies a while back):

/*regular CSS*/
</style>
<!--[if gte mso 15]>
<style type="text/css" media="all">
tr { font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
</style>
<![endif]-->
</head>

Just as fair warning: the above fix works great for me and is much better than putting "font-size:1px; line-height:1px;" everywhere, however, take care when styling alt tags, as it then attempts (almost at random) to clip or squash the image. One workaround for this is to apply line-height:100% to the td containing the image and styled alt tag. Remember to test!

There are many other MSO specific styles (I can see 202) on this list, and we can look at some of the potentially useful ones in another post. We know that none of this is particularly new but in the spirit of sharing, we are slowly building up a library of bug fixes etc, which can potentially be of use to all kinds of email people. It’s surprising what gets missed at email-coding school sometimes, I went to university with someone who studied film but hadn’t seen “Pulp Fiction”. It happens guys.