At work, we recently kicked off an effort to make sure that all of the emails coming from our applications are Outlook 2010 compliant…meaning that they render in a reasonably acceptable manner–at least as emails go. On the surface, this doesn’t appear to be that big of a deal. However, for us it is, because the prior version for which we tested emails was Outlook 2003.

So what’s the problem? Well, if you didn’t hear, Microsoft made the brilliant move of deciding to switch their email-rendering engine from IE (Outlook 2003 and before) to Word. In short, this means a massive decrease in support for HTML standards, CSS support, etc. In fact, the move is so counter-standards that an entire movement has been started to try to pressure Microsoft into fixing the problem…so far, nothing.

But arguments about the “smartness” of this change aside, the facts on the ground still require that my co-workers and I fix some emails. So far, my experience has been that in terms of layout, not a huge amount of revision has been necessary. What has caused issues, however, is the lack of CSS support. If you ever find yourself needing to get an email looking decent in Outlook 2010, here are some helpful pointers that I’ve discovered along the way.

Pick a Class, Any Class…But Only One!

For any normal rendering engine, you can easily apply multiple classes to HTML elements, allowing for a really nice level of specificity. Outlook 2010? Not a chance. You can specify one class, and one class only; the first in your “list” will be acknowledged, and the rest will be ignored. Not a huge deal, but something of a pain if you have complicated email stylesheets and a lot of code to wade through…

No Element Matching

In CSS, you are *supposed* to be able to apply style rules to elements simply by referencing the element. So for example:

td {border:solid 1px silver;padding:4px;border-collapse:collapse;}

This will apply a 1px, silver border to ALL table data elements, give a generous 4px of padding, and apply the collapse on the border-collapse attribute. In Outlook 2010, however, this simply doesn’t work. If you want all your td’s to have a particular style, you’ll need to either apply an inline style to all of them, or at least create a named class and apply it to all of them. Does this suck? Yes, absolutely.

Weird Margins

The other day, I was wrangling with this bit of code:

<table border="0" cellspacing="0" cellpadding="0" class="myclass">
     <tr>
          <td class="mytd">Here's some content</td>
          <td class="mytd">Here's some more</td>
     </tr>
</table>

Pretty simple, right? Well, for some reason, in Outlook 2010 a gigantic margin was added to the text in each table data. I never quite figured out what caused it, but I did figure out a solution. I simply cleared out the margin on my “table” class, and the table data margin went away. Stupid.

Conclusion

So far, these are some of the things I’ve found to watch out for. I’m sure I’ll find some more, and if I do, I’ll follow up on this post with some more pointers. I guess in the face of such horrible decision made on Microsoft’s part, I can at least be grateful that I have something pointless to blog about 🙂