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!

  • Brian Thies

    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

    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

    This makes want to give up on HTML email :(

  • Ros Hodgekiss

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

  • eko

    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” style=”border:thin; 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

    @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

    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

    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

    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.

  • amy

    Anyone have a solution for buttons in OWA? OWA is squishing my button height to the height of the link text. Same results whether I use Bulletproof buttons, or putting height on a TD that has background color and a link. Any combination of TD/DIV/A tag styling results the same way.

  • Balthazar Simões

    Gosh, I sure wish we had a good answer for you, Amy! Unfortunately, OWA is one of the peskiest of all email clients and we don’t have a good fix for this :(

  • Luke

    So I just spent like an hour trying to figure this out only applies to web app – if you try to put white text over a dark background owa will not let you do it. Its not even consistent. If the text is within a nested table within the table that the background color is applied to it will work. However, if you just try to put a \<\p \style=\”color: #ffffff\”>\<\/p\> within the table that has the bgcolor owa will auto force it to be black?? wtf is this? Seriously ridiculous.

  • Breetel Graves

    That’s so frustrating, Luke! Wish we had the magic bullet here. If you find a solution, please share!

  • Luke

    Lol right yes that would be helpful – the solution was to not use #ffffff or white – I used color hex to get an extremely light shade of a complimentary color. I happened to use #ebf7f9

  • Andrea Stavola

    Hi everybody, i’m designin newsletters since 2 years, and never found a way to be sure that my newsletters are displayed the same across all email clients! The most common problem i experience is a sort of strange image breaking/spacing (see attached). I’ve noticed that this problem almost always shows up when i use columns in my layout, but when using only horizontal slices (made in photoshop) it’s pretty sure we have no problems.
    Could anyone help me avoiding any kind of layout break?

    Here’s also a link to download my html. (don’t notice image urls because we send to the client that converts paths into absolute ones) http://we.tl/PqgFWYhmv0

    Thanks

  • Andrea Stavola

    This is the image wanted to post

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098 0800 161 5300