liliya
2007-02-20, 06:56 PM
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.
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.