Reliable solution for conditional comments in Outlook.com HTML emails

Question

I've seen here and elsewhere that a recommended way to set up conditional comments to work with Outlook.com, but because of another known issue detailed below I'm getting blank emails. Referencing the two code examples below I wanted to see if anyone had a reliable way around this issue.

First example:

<!--[if mso]><!-- --> 
<style type="text/css">


#learn-left { width: 350px; max-width: 350px; }
#learn-right { width: 165px; max-width: 165px; }


</style>
<!--<![endif]--> 

The above code causes a blank screen in Outlook.com even though other posts here have cited that <!--[if mso]><!-- --> works with Outlook.com. I know there is any issue with having any HTML tags inside comments, but if the conditional is placed with the style tag it doesn't work either. Strangely the code below seems to work to a degree.

<!--[if mso]><!-- --> 
<style type="text/css">


#learn-left { width: 350px; max-width: 350px; }
#learn-right { width: 165px; max-width: 165px; }


</style>
<![endif]--> 

I should also note the reason I have this code is for Outlook 2000 and 2003 compatibility so I can't use media queries as an alternative solution.

Answer 1

Those sites that say you can do that are wrong. Outlook.com eats your conditional comments, and anything inside of them. Gave me quite a headache for a while.

For things where you need to use conditional comments, I found the best thing to do was to have the regular conditional comment section, but also include another table row / column or what have you with a class like class="outlookcom" (on the td) and hide it with display:none. Then, in your <style> tag you can target that hidden row with ecxoutlookcom (outlook prepends 'ecx' to all of your classed tags) and use display:block !important to show itfor outlook.com

Answer 2

I tried this, but it didn't work for me. It was showing stray comment tags onscreen.

<!--[if !gt mso 9]><!-- -->
/* css here */
<!--<![endif]-->
<!--[endif]-->

This is what worked for me. I tested it on email on acid. Seems to work perfectly.

<![if !mso]> 

<div>
This shows on all clients but not outlook 2007, 2010, 2013.
Works fine on outlook.com.
</div>

<![endif]>

---

<!--[if gte mso 9]>

<div>
This only shows on outlook 2007, 2010, 2013
</div>

<![endif]-->

I for more info, try searching for "microsoft downlevel revealed conditional comments"