The Thought Balloon

HTML emails and Microsoft Live Mail

Posted by Dan Eastwell Thu, 14 Dec 2006 13:22:00 GMT

We've all learned that sending HTML emails is the devil's work. If you haven't yet, I suggest you look at this list of articles on sending HTML emails.

Safe now in the knowledge that you need to forget all you know about semantic structure, separation of content from style and table-free layouts, you've constructed your email, to find that Microsoft's new alternative for hotmail, Live Mail, doesn't display your emails correctly.

How's Live Mail Structured?

A dig around using the Internet Explorer developer toolbar shows that the site is layed out in frames, and that the one that you're concerned with (the current email you're reading) is in frame#app_frame, you'll need to dig further down through seven layers of divs to div#ReadMessagePane which, within a form, your message will be displayed.

This message will have been filtered for disallowed tags by Microsoft's SafeHTML filter, as displayed by the content generator meta tag. I'm unaware of what this allows or disallows, but if an overview of this was available, it would be key to understanding how you can structure your emails.

Update: SafeHTML is also an open source anti-XSS parser written in php. There's a chance that this parser is being used in order to strip out HTML tags. For what it's worth, this is what pixel-apes safeHTML does:

This parser strips down all potentially dangerous content within HTML:

• opening tag without its closing tag
• closing tag without its opening tag
• any of these tags: “base”, “basefont”, “head”, “html”, “body”, “applet”, “object”, “iframe”, “frame”, “frameset”, “script”, “layer”, “ilayer”, “embed”, “bgsound”, “link”, “meta”, “style”, “title”, “blink”, “xml” etc.
• any of these attributes: on*, data*, dynsrc
• javascript:/vbscript:/about: etc. protocols
• expression/behavior etc. in styles
• any other active content

It also tries to convert code to XHTML valid, bu htmltidy is far better solution for this task.

Points to Bear in Mind

My ad hoc testing of Live mail has brought up the following points which are key to building an HTML page that will display when embedded

• Live mail will embed your content in a form
• Live mail, surprisingly, is XHTML 1.0 strict, and as a result, so should your code be. It should display well with or without the DOCTYPE (assuming you are sending to other online mail clients)
• Margin style attributes are stripped, either inline, in a style element, or in a remote stylesheet. It's key that your design displays without margins mentioned. This may well require some clever thinking, if your design relies on margin-stripped text elements.

Setting text nicely

Text by default in Internet Explorers has a bottom margin of 1em, so will display as such in Live Mail. There's no way of getting rid of this, either with negative padding (!) or line-height. The only thing to do, if you don't want this margin to break your design is to get rid of the containing element. So bye-bye h1, h2, h3 and p and hello span and a, which as inline elements have no default top or bottom margin.

It may feel 'wrong' but this is more an excercise in reverse-engineering an application and supplying a module for it, than it is in semantics. You can then apply the styles you'd like, such as color or background-color to these elements, which, ironically, you may have to set to display:block.

There's probably still more to find out about Live Mail, but this should be a good starter, for those who are given the abominable task of having to make an email look like a web page.