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.