Browse by...
Home Resources Blog

The clever team over at SitePoint recently discovered a neat way to target Microsoft Office, and most importantly Outlook 2007 using conditional comments in your CSS.

For those new to the concept, conditional comments are a Microsoft only technique historically used to target specific versions of Internet Explorer. For example, you can write a separate set of CSS rules that will only be applied to Internet Explorer 6. You can read all about them and see examples here.

Importantly for us email designers, James Edwards from SitePoint has discovered that using the following conditional comment, you can actually target Outlook 2007.

<!--[if gte mso 9]>
 // This CSS will only be seen in Outlook 2007
<![endif]-->

Why would I use this?

Most of the time you probably wouldn’t. As Mat recommended back in May, you really should be coding your email newsletters using tables and inline CSS to get the best results across the board anyway. This approach generally leads to a good result in Outlook 2007 without the need for special hacks (see exactly what CSS properties and selectors Outlook 2007 supports here).

However, there are plenty of times when every email client plays nice with your design, but for some reason Outlook 2007 just won’t come to the party. We see plenty of examples of this when helping our customers with coding issues. If you’re in this frustrating position, this conditional comment method is a handy way to add Outlook 2007 specific code to try and fix the rendering issue without messing your design up in all other email clients.

An example of the method in action

To illustrate how handy this technique can be, I created a simple test email shown below. If anyone has tried to design an email with unordered lists , you’ll know that Outlook’s support is shaky at best. Here’s the code for my test:

The CSS

<style type="text/css">
ul {
   margin: 0;
   padding: 0;
   list-style-position: inside; 
}
ul li {
   font: normal 12px arial, helvetica, sans-serif;
}
</style>

The HTML

<p>Here is a list:</p>
<ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
   <li>List item 4</li>
</ul>

The screenshot on the left is how my email rendered in Outlook 2003, and on the right in Outlook 2007.

Outlook 2003 and 2007 without the conditional CSS

As you can see, Outlook 2007 refuses to show my bullets, whereas Outlook 2003 (and all other email clients) show them just fine. Using the conditional comment, I’ll add some extra CSS for Outlook 2007 only that fixes the issue by adding an additional left margin to the unordered list.

The updated CSS with conditional comment

<style type="text/css">
ul {
   margin: 0;
   padding: 0;
   list-style-position: inside; 
}
ul li {
   font: normal 12px arial, helvetica, sans-serif;
}
</style>
<!--[if gte mso 9]>
<style>
ul {
   margin: 0 0 0 24px;
   padding: 0;
   list-style-position: inside;
}
</style>
<![endif]-->

With the new Outlook 2007 only CSS, I get the following results. Notice that the bullets are now visible because it recognizes the conditional CSS and applies the required left margin.

Outlook 2003 and 2007 with the conditional CSS

Impact on other email clients

When running these tests I also had a look at the impact of the conditional comments on other email clients including all flavors of Outlook, Gmail, Yahoo! Mail,
Lotus Notes, Thunderbird, Apple Mail, Hotmail and AOL. From what I could gather, they didn’t have any negative impact on these clients, but I recommend testing against them with your version before sending.

While the unordered list bug was the first example I could think of that would take advantage of this hack, I’m sure there are plenty of others. I think it’s also worth echoing that this certainly isn’t something you’ll need to use all the time. But, for those odd occasions that Outlook 2007 is making life difficult, this could just be your saving grace.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free