Search code examples
outlookhtml-emailoutlook-2010

Microsoft Outlook 2010 ignoring mso conditional comments

In the <head></head> of my email's HTML I have:

<!--[if !mso]><!-->
<style>
    .contentTable {
        border: 1px solid #f00;
    }
</style>
<!--<![endif]-->

This <style> block should not be parsed in Outlook, but when testing in Outlook 2010 on PC, the table has the red border. Is there something I'm doing wrong?

Solution

  • This is incorrect:

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

    Try this instead:

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

    Using your code as an example, this will be hidden from Outlook:

    <!--[if !mso]><!-- --><style type="text/css">
  .contentTable {border: 1px solid #f00;}
</style><![endif]-->

    This code will show only in Outlook:

    <!--[if (gte mso 9)|(IE)]><style type="text/css">
  .contentTable {border: 1px solid #f00;}
</style><![endif]-->

    I tested the following code in Litmus. In a modern email client, you will see a blue box. In Outlook 2007-2010, 2013, 2016, you will see a red box.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Outlook Images</title>
</head>
<body style="background: #ffffff !important;">
<table>
  <tr>
<td>
    <!--[if !mso]><!-- -->
    <img src="http://via.placeholder.com/300x300/0000ff/?text=Modern+Email" alt="Modern+Email" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
    <!--<![endif]-->
    <!--[if gte mso 9]>
    <img src="http://via.placeholder.com/300x300/ff0000?text=Outlook" alt="" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
    <![endif]-->
    </td>
  </tr>
</table>
</body>
</html>

    Good luck.