Glen Lipka has been frustrated with the task of producing quality HTML email that works across various email clients, which of course got even harder when Outlook 2007 took email design back a few years.
Anyway, Glen thinks that he nailed it:
Outlook 2007 actually has a little more CSS support than I thought. Just because I don’t get positioning and float and a decent DIV or the right box model or margins, doesn’t mean that I can’t still make it work. Using a couple of tables, borders, padding and width, I think I came up with a solid solution that still looks like clean html.
I refuse to use spacer.gif. Spacer.gif can kiss my shiny metal ass. Boo spacer! As a side note, I sometimes interview web developers for positions. I look at their html. If I see spacer.gif I say, “Nope, they stinkâ€. Sorry, it’s a pet peeve.
Opening up your email html in Word 2007 is NOT the same thing as opening up your html as an email in Outlook 2007. They are really really close, but they have differences. I kept seeing them, so I stopped trying to use Word 2007.
There is a bug in Outlook 2007. If you have a table, and each cell has padding of 10px and then you put a cell in the middle to be 0px, it shortens the height of the cell and basically makes a HOLE in your table. I was dumbstruck by this one. It seemed impossible to do, but it does it. The fix is to keep the padding on top and bottom, but remove left and right. The bug is related to height, not to width. It shortens vertically, but not horizontally.
Gmail is evil. They only allow inline CSS. They do this to avoid overlapping CSS rules. They could have dealt with overlap CSS rules using a rewrite scheme that put a prefix in front of all the classes. It just made the html really messy. I did my best in my template above to make it clean. But still, that’s lame.
Gmail strips all height css rules. Why height?? What did height ever do to them? I got around this problem using padding, but in the dynamic app, it means we need to calculate specific padding rules based on the height the user requested minus the height of existing content. Not trivial, but doable. Why does Gmail allow width? What’s the deal with height?
Borders can not be defined as 0px width. In Outlook 2007, if you declare a border as 0px width, it shows up anyway. I couldn’t figure that out, so I said, “Ok, I won’t do that.†I saved an example which works in the browser, but not Outlook 2007.
Divs can have borders, but not padding in Outlook 2007. Why not Microsoft? Come on, work with me here. Meet me halfway. YUCK!
