Email rendering issues and fixes for Outlook Web App (OWA)

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. Code-related questions and examples are always welcome in our ‘Email design and coding’ forums, too!

Posted by Ros Hodgekiss

9 Comments

  • Brian Thies
    16th September

    Place the font tags outside of the div/p/h tags you’re using, and the font tags will simply act as a back-up for OWA without affecting the original intended look for all other clients.

    Here’s the font size tagging I use to match the inside tags: 9-11px use font size 1, 12-14px use font size 2, 15-17px use font size 3, 18-21px use font size 4, 22-29px use font size 5, 30-36px use font size 6, 37+px use font size 7. 

    Also keep in mind that p tags in OWA will have a top and bottom margin that can’t be adjusted.  If you need exact spacing, use div tags with the text styling along with nested tables for the vertical spacing.

    As Ros mentioned, spacer images shouldn’t be used, EVER.  Completely unnecessary when you can use nested tables to format all spacing.  Rowspans & colspans fall in the category of things you shouldn’t use as well.

  • Ros Hodgekiss
    16th September

    Brian, you’re the master when it comes to working around OWA. Thank you so much for the tips, they’re all gems! :D

  • Wayde Christie
    16th September

    This makes want to give up on HTML email :(

  • Ros Hodgekiss
    16th September

    Chin up, Wayde - its just Microsoft ruining the party, as always. Console yourself by testing CSS3 effects on your iPhone or something :)

  • eko
    29th September

    Good post Ros. Hey i was wondering if anyone has noticed Outlook ‘07/‘10 not displaying right borders? Here is the code i’m using for the table :

    <table width=“600” cellspacing=“0” cellpadding=“0” align=“center”  border-color:#747679; border-style:solid;”>

    It looks fine in Outlook ‘03 but when viewed in ‘07/ ‘10, the right border disappears. Has anyone been experiencing this as well? Any advice will be much appreciated!

  • Ros Hodgekiss
    29th September

    @eko - We’ve had this issue reported before - scroll down to read the comments here. Try explicitly stating border=“0” in your HTML attributes and border-right: 1px solid #747679; in your inline CSS. Also see if making the table more narrow helps - it could be that the right border is being overlapped/truncated by something else.

    I do remember having this kind of trouble a while back, so let me know if the above solutions help!

  • eko
    30th September

    Thanks for the tip Ros! I just tried but to no avail. In fact i found that reducing the table width to 550px would show the borders fine in the preview pane in Outlook 07 but when maximized, the right border disappears. I tried 575px and it was kind of the opposite, and a times, it the right border would appear. it seems to be a bit inconsistent. Dunno Ros.

    I’ll keep checking back to see if there are any new suggestions i can try, but for now, i’m going to try to stay away from assigning borders to my emails.  Thanks Ros!

  • Christine
    21st October

    I have an email that looks fine in browsers and browser-based email clients, but the column widths are somehow modifying in Outlook. Any idea why this would be?
    http://www.hilcotrading.com/files/Email/HMR/RetailM-AEmail/Retail_M-A_Email_web.html—looks okay in browsers, but not in Outlook. The columns with the colored backgrounds are bleeding out into the margins.

  • Ros Hodgekiss
    21st October

    Hi Christine, the usual culprit in this case is that the column widths don’t exactly add up to the width of the newsletter. Remember that border widths also contribute to the total column width. If fixing column widths doesn’t do the trick, I’d say use spacer images to maintain spacing between columns. Feel free to contact our support team if neither of the above sort things out - we’d be happy to take a more extensive look.

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

Create an account