If you’ve ever had a run-in with Microsoft’s Outlook Web App or moreso, Outlook Web Access (both OWA), chances are that its been for all the wrong reasons. These spin-off webmail clients from the Exchange Server line are particularly tricky to code for. To make matters worse, there’s very little information out there on OWA’s rendering quirks.
This morning, the support team (which includes yours truly) mulled over an OWA-related ticket and decided to compile a list of common HTML email rendering issues and fixes in this post. If you would like to contribute your own, please feel free to add them in the comments below.
Inline CSS styles in my HTML email have been overwritten
When email messages are moved from the inbox to a folder in OWA (Exchange 2010), the webmail client goes from displaying the email in an <iframe>, to wrapping it in a <div>. Once in a folder, OWA applies its own stylesheets, which tend to bung up even the most carefully-coded designs. Move the email back into the inbox and see if it looks as it should.
CSS styles just aren’t working
Sadly, CSS styles aren’t supported at all in Outlook Web Access (Exchange 2003) and earlier. The solution is to go ‘totally old school’, eg. use <font> tags to set font type and color, as well as table cellpadding/cellspacing and <br> tags instead of margins and padding. For more examples, take a look at this post on Outlook Web Access by Banane.
Outlook Web App (Exchange 2010) comes with reasonable CSS support, but when in doubt, try to use a non-CSS solution to fix your layout and styling issues.
I’m getting gaps in my table layouts
In Outlook ’07/’10 and its OWA cousins, it’s known that adding align= and valign= attributes to <td> tags can sporadically add padding. Try to remove these attributes when possible. Also set <td> cell widths using the width= attribute and make sure they add up to equal the width of the table. I know, I don’t like math, either.
Spacer image widths are going mad and ruining my layout
Don’t use spacer images, where possible – instead use exact column widths, as described in the previous tip. Spacer images can do unusual things.
Well, that’s a wrap. If you’ve got any particularly tricky quirks that you’ve observed, please let us know about them in the comments below.
