Blog

News, tips and all things Campaign Monitor

Using conditional comments to target Outlook 2007

Posted by David Greiner on July 23, 2008

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 and in our forums. 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.

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.

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.

13 comments so far

Search all posts

Dig into a category

• Articles/Tips (128)
• Email Newsletter Design (127)
• Happy Customers/Press (93)
• In the Forums (11)
• Interviews & Case Studies (9)
• New Features & Updates (113)
• Observations & Answers (110)

Stay in the loop

Prefer updates via email? Sign up below and we'll send you all the good bits each month.

Popular articles

Email design guidelines
Straight to the point advice for creating effective emails.

Why we need standards support in email
Read why standards in HTML email are so important, and what we're doing about it.

CSS support in email for 2008
The CSS support of even more popular email environments tested and recorded.

Image blocking in email
A roundup of how each of the popular email clients suppress images in HTML email.

Can I use flash in email?
We test flash support in all the popular email clients. The verdict - don't do it.

Email design gallery

Our email design gallery showcases more than 150 amazing email designs sent by our talented customers.