Browse by...
Home Resources Blog

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.

Outlook Web Access
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.

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.


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