Designing HTML emails for Outlook 2007

[liliya]

The new Outlook 2007 does nt support or misinterprets many standard HTML tags and CSS styles. These are some issues I ran into. These have nothing to do with the way Sugar sends out emails, but I thought it may help my fellow designers to cope with the new Outlook. I have a feeling, I will be adding to this list, so please keep checking this thread.

• No background images
  Workaround: use images, forget about gradient backgrounds and other niceties.
• Margins for images (ex: " img style='margin: 5px'") are ignored.
  Workaround: (1) add white space to the image itself, (2) add padding to the table cell, or (3) if it is not in a table, put it inside a table cell.
• "float" style is ignored.
  Workaround: use "align=left/right" for images, but be mindful of missing margins (see above).
• Align="absmiddle" is ignored for images.
  Workaround: none found so far - please recommend one.
• Padding for P and DIV tags is ignored (ex: <p style="padding: 10px 0 0 0;">)
  Workaround: use margins whenever possible: ex: <p style="margin: 10px 0 0 0;">
• Paragraph width is ignored (ex: <p style="width: 200px; border-top: 1px solid #999;">).
  Workaround: be creative, so in the example above you can use an image to create a line (some of us may be reminded the old days before CSS)
• List styles are ignored: no images for bullets, no square bullets, no lists without bullets.
  Workaround: close your eyes and count to 10. If you don't want bullets to appear - use paragraphs instead of lists.
• Padding for lists is ignored.
  Workaround: use margins whenever possible.
• Cell padding is acting up. This is by far my favorite and I can't quite grasp the cell padding concept of the new Outlook. You just have to see it to believe me, but sometimes, padding-top adds space on TOP of the cell, NOT INSIDE the cell, so that the borders on top of 2 neighboring cells in the table are not on the same line. Vertical alignment does not help, setting cells to the same height does not help.
  Workaround: avoid tight situations whever possible. Set same padding to all cells in a row or, if using images, add white space to the images themselves instead of cell padding.
• Font styles set for the entire email in a DIV or SPAN are ignored inside tables.
  Workaround: set font styles for each table inside <table> tag.

Please feels free to add to the list, and i will do the same as I run into more issues.

For in-depth information about what is or isn't supported in the new Outlook 2007, please see this guide: http://msdn2.microsoft.com/en-us/library/aa338201.aspx There you will also find a link to an HTML/CSS validator for Outlook 2007.

[cdcbrian]

liliya

I have found that the Word 2007 rendering engine is ignoring margins applied to the P tag, the DIV tag, anything I've applied it to. I tried using the Padding workaround, but it's ignoring that as well. So I'm struggling with your suggestions above/below since the solution to the problem is a workaround that doesn't work.

Do you have any other resources or suggestions?
Thanks!

[liliya]

There is no way to control padding 100% in the Outlook 2007, unfortunately.

I have found that the MARGINS do work on the P tags and PADDING work on the DIVs. Some combination of the 2 work most of the time and other times they don't.

I embed margins into images whenever possible and resort to tables for alignment. Without seeing your code, this are my suggestions. Sorry for the late reply.

[ives]

Imaginative use of borders can mitigate the padding and margin issues:
e.g.
border-left:10px solid #eef3f6;

instead of margin-left: 10px;

[focusdesign]

One workaround for the lack of margin and padding support for images in Outlook 2007 is by way of the following ImageMagick command to add a 10 pixel border to the right and the bottom of an image:

convert -border 10x10 -bordercolor White -gravity NorthWest -chop 10x10 original_image.jpg output_image.jpg

The NorthWest command can be changed to add a border to other parts of the image (i.e. NorthEast for a bottom and left border, West for a right border, etc.).