Using conditional comments to target Outlook 2007

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.

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.

Posted by David Greiner

14 Comments

  • Chris Harrison
    24th July

    Minor thing: the example for the MSO08 code should have the margin set to ‘margin:0 0 0 24px;’ to target the left margin, not ‘margin:0 0 24px 0;’ which would target the bottom margin.

    I’m super excited to see that there’s now a fairly reliable way to target Outlook 2007. Thanks for sharing this.

  • Dave Greiner
    24th July

    Good catch Chris, thanks man. Fixed. Looking forward to hearing how people use this to their advantage.

  • Chris Harrison
    24th July

    My pleasure, Dave! Thanks again!

  • Mark Wyner
    24th July

    Nice work, folks. I’m sure this will get many a web designer out of a pickle. Cheers!

  • Christine
    25th July

    Has anyone tried coding a horizontal email for Outlook 2007? I have run across an issue that is unique to Outlook 07. There seems to be a max width of 2200 pixels for an email. Outlook 03 and several other popular email clients are able to display an email over 3500 pixels wide. Are there any conditional css comment tricks that could get around this? Thanks!

  • Susannah
    26th July

    Is there a functioning inline version of this fantastic tidbit? I have to include all my CSS as inline code, as I’m sure many others do for e-mail newsletters!

  • Randy
    26th July

    This is a huge help! Coding html email is my full-time job; I’ve tried conditional comments to try to target Outlook, but never would have tried “gte mso 9”. Anyone know how this works?

  • Dave Greiner
    28th July

    Susannah, unfortunately you can’t use this method inline I’m afraid, which in reality would only impact on Gmail. Of course, any inline CSS would override any conditional comments you add, so you’ll need to be selective about where and when to use the combination of inline CSS and conditional comments.

    It’s never easy, but the hard work continues.

  • Kip Deveson
    29th July

    Hi
    I have the same problem using the NormalEmail template and even when I use the 2007 QuickStyle template - Outlook 2007 drops the numbers and the bullets anless I reattach the template/Quickstyle - which is a hassle for everyday operators.  Any ideas how I can get the bullets and numbers to ‘stick’ in Outlook 2007?  Would adding the HTML to the Template or QuickStyle template work?  I am using HTML in Outlook, not RTF - would it be hidden to the general user?

    Any help at all would be appreciated I have been butting my head against the wall for months trying to sort this!

    Regards,
    Kip

  • john.jones.name
    15th August

    Thats a great way to get around outlook 2007 html rendering bugs !

    also it could be a nice way to gain an insight into the users mail client by supplementing a different link maybe ?

    regards

    John Jones
    http://www.johnjones.me.uk

  • MannyDog
    15th August

    Nice work David and thanks for the tip. Top job on the latest newsletter and CSS Support update. Keep it going.

  • Jason
    3rd September

    Just to flag up - I have seen this technique cause some problems with Outlook 2003. The email appears to be blank, and when you inspect the source, it has been unable to render the content at the

  • Jason
    3rd September

    (sorry… I broke the comment)

    ... conditional comment lines, and everything after (ie. all the html).

    Weirdly, this didn’t happen every time I sent to Outlook 2003, but very frequently.

  • Jim
    1st November

    This is great to know. As I put this to use on a current project, I’ve noticed that AOL’s web-based email browser includes the styles inside these conditionals. To overcome this, one has to add a final bogus conditional at the end of the style blocks that re-instates the formatting of any elements that you’d changed in your real conditionals (presumably targeted to Outlook 2007).

    or instance, when adding this conditional for Outlook 07:

    ...[if gte mso 9]...
    ...(style tag)...
    ul {
       margin: 0 0 0 20px;
       padding: 0; }
    li { 
       padding: 0;
       margin-left: 0; }
    ...(/style tag)...
    ...[endif]...

    I had to add a final conditional to an irrelevant version of MSO to get back the proper styling for AOL:

    ...[if lte mso 7]...
    ...(style tag)...
    ul {
       margin: 2px 0;
       padding: 0 0 0 14px; }
    li { 
       margin: 0 0 2px -12px;
       padding-left: 14px; }
    ...(/style tag)...
    ...[endif]...

Sign up for free.
Then send campaigns for as little as $9/month

Create an account