I have an html email that works of in all email clients apart from outlook 7. For some reason it's ignoring all css margin and padding settings. Here's a sample:
<div style="color:#000; font:18px arial; padding:10px 18px; background-color:#FFF3A8; margin:0 0 2px 0; text-decoration:none;"> <!-- some html --> </div>
Has anyone encountered this?
(check agains this list too http://www.scribd.com/doc/2303700/Guide-to-CSS-Support-in-Email-2007)
I've come across similar problems before with margin and padding in Outlook 2007. Unfortunately while CSS compatability is a long way off in Browsers, it's a mile off in email clients! In my experience I've found margin/padding too unreliable in Outlook 2007, so tend to use other methods to achieve the same goals.
Suggested other methods (can't believe I'm suggesting some of these...) are spacer images, 90% width tables (gulp) or paragraphs should work.
Hope this helps.
The CSS guide to HTML email is great but not granular enough for Outlook 2007. Here are the MSDN specs for Outlook and Word 07, which are closer:
This says that div tags support margins but not padding. So you may want to use only margins instead (though that might break the email in Gmail).
(As an aside: some clients don't support the font css shortcut, so I would do style="font-size:18px; font-family:Arial" instead of the shortcut form.)
As a further aside, the MSDN specs are incorrect in a few places too. Namely, it says that Outlook 07 supports display, which is not true at all. Yet another reason why MS was insane in changing the CSS rendering in Outlook.
Please refer to my previous post regarding padding, margin, and nested tables (what works, what doesn't work)...