Office 2007

I’ve been working on a new version of Tank! using Skidoo Redux. Hope to have it up sooner than later, although work has tied me down for the next few weeks.

I work for a college (and you might guess which one by the URL of this blog). And at this college we have students with laptops. These laptops are now coming pre-installed with Vista and Office 2007. Furthermore, those in charge are starting the process of evaluating the migration to Vista and Office 2007.

We have applications that generate e-mails that go out to students and these students are now viewing them in Outlook 2007. The problem is that Outlook 2007’s HTML rendering engine has been changed. Instead of using IE (like it did in all previous versions) it’s now using Word’s HTML rendering engine, which is about as poor and bug-ridden as IE 4.

I’ve started work on trying to figure out how Outlook 2007 renders HTML e-mails and specifically where things go wrong. In the process I’ve nearly ripped out all my hair and have made little headway in the matter. I worry I might have to start plucking someone else’s hair because all of mine is gone. In a few weeks the entire office will be run by bald people.

The first thing Outlook 2007 does is it likes to combine elements and treat them as a single entity. For example you might have an H1 element followed by a DIV element. Outlook 2007 will combine them into a single element. Styles you apply to one will be applied to the other.

Oh goody.

This seems to hold true for any two elements whose margins collapse together. It makes styling with CSS incredibly difficult.

The second major problem is that it appears certain elements that deal with dimensions (padding, margin, border) have broken inheritance. I can set a border on an element with a selector like div.my-box and it works fine. If I change the selector to something like div.outer-box div.my-box the border won’t render at all, but other rules, such as font size and color, set to this selector are applied correctly.

This can sometimes be fixed by sticking an !important directive onto each rule. But sometimes even that won’t work.

Outlook 2007 also seems to completely ignore certain CSS rules even though Microsoft’s own documentation says otherwise. For example the rule list-style-type: none; will not change the style of the list. The dots remain. In fact nothing I do seems to remove the list item markers.

That’s the beginnings of things at least.

I have found that I can work around things, although the CSS gets really messy. For example I’ve found setting a full border around an element with the same color as the background (to hide it) gets Outlook 2007 to start recognizing margin and padding values on some elements (but not all).

I’ve also found if I ditch margins altogether I can usually get a better go at managing gutterspace between elements. However I prefer the collapsible nature of margins and can’t/don’t want to get away from them completely.

Ah well.

Advertisements

2 thoughts on “Office 2007

  1. Hi, dude!

    I really like your efforts on creating standards based cross browser sites, because there aren’t enough people who are successfull with that.
    Most fail with the css and give up. Or leave some browsers out.

    According to your post and Outlook 2007 bug, I’d reccomend you as developer to go the way of the least resitance. I mean if you know that creating standards based design is impossible or very hard to do with that rendering-engine (BUT NOT WITH OTHER MAIL-CLIENT SOFTWARES) make a table based design :(. Or use conditional comments if possible with word-engine.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s