Creating a HTML email which is compatible with Microsoft Outlook is a really big headache. This is because Microsoft Outlook use the Microsoft Word engine to render HTML.

The following are some notes which could help you before you start working on a HTML email template.

1. Use nested table for elements position.
2. Do not use <p>
   • Use <div>.
   • Or use <span> and set it to display: block, but the <span> in Outlook could not recognize <br />.
3. Do not use CSS margin
   • Only use padding-top and padding-bottom.
   • If you want to have padding-left or right, add a <td> with defined width.
4. Do not use <table> background.
   • I find a suggested solution but it does not work.
5. Wrap the link with <font> if you want to add color.
6. Do not use border inside the nested tables. Create <td> and insert the border as <img> instead.
7. Set border=”0″ in <img> tags.

Hope the above suggestions could help you to fix the Hotmail and Microsoft Outlook problems.

Done =)

Reference:

• Coding a HTML Newsletter Email
• The inconvenient truth about div tags in HTML emails