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.
- Use nested table for elements position.
Do not use <p>
- Use <div>.
- Or use <span> and set it to display: block, but the <span> in Outlook could not recognize <br />.
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.
Do not use <table> background.
- I find a suggested solution but it does not work.
- Wrap the link with <font> if you want to add color.
- Do not use border inside the nested tables. Create <td> and insert the border as <img> instead.
- Set border=”0″ in <img> tags.
Hope the above suggestions could help you to fix the Hotmail and Microsoft Outlook problems.