Recently I’ve been working on writing email templates, it is a lot of pain checking it in the different email clients. Here are some of the problems I encountered and how to fix them.
- CSS is not fully supported by all email application and web clients. This article at Campaign Monitor is a good reference on what is supported and what is’nt. Always code in tables is a good idea.
- Gmail seems to render differently in Firefox and IE so check this on both to be sure
- Cellpadding is not supported in Gmail new version, instead of <table cellpadding=”10″ cellspacing=”10″>, use empty tds on the side and add padding to the first line of the td cell. Adding padding to the table it self doesn’t work in Gmail for some strange reason. So the above method is what I found the safeset.
- Calculate your pixels, remember to add padding and border on top of your cell width to get the full width. If you don’t specify width on your table cells, Outlook 07 do weird things to it.
- Always add px to the end of styles, as not adding this will cause different email clients to display different things
- Outlook 07 doesn’t display borders properly. If you had a table, with different cells and a border under each cell, sometimes in Outlook 07, the bottom border doesn’t gets displayed. Try moving the border style to the first item of the inline style, so instead of style=”padding:10px;border-bottom:solid 1px #000000″, change to style=”border-bottom:solid 1px #000000;padding:10px”. As strange as this may seem this have resolved my problems
- Outlook 07 if you have a border on the outside of table, sometimes the border on the side doesn’t get displayed. This is because the width of the table is too big, so the entire table is pushed outside it’s area and the border on the side get’s cut off.
- New Gmail seems to have problems with table colspan and row span if they are used on the same cell. Instead of using colspan and row span together, alternatively use an inner table inside of the cell.
- Outlook 07 seems to play weird font wrapping, in other email clients, where one line would get displayed fine in a single cell, outlook 07 seems to wrap the text. So increase your cell width so it fits fine in 07.
- Border dotted is not supported in Outlook 07, it just doesn’t get displayed.
Filed under: .Net
