My HTML message appears different from what I expected in Microsoft Outlook

With the introduction of Outlook 2007, the rendering engine for HTML content has changed in MS Outlook, which now uses MS Word as the rendering engine, rather than a browser. This change has caused some HTML messages to appear differently than in previous versions of Outlook and in other email clients.

To solve this problem, there are some precautions you can adopt, to make sure that your email messages are properly displayed. Specifically, consider the following with regard to how HTML code is handled:

  1. GIF images are not animated;
  2. Flash is not displayed;
  3. Background images (both in a <div> and in a table) are not displayed or not fully supported. Also the background colors are supported to a certain extent, meaning that <div> and nested tables do not preserve the attributes of the background color;
  4. Forms / scripts inserted in the message body do not work;
  5. Cascading style sheets, either embedded or external, are not processed. You can use inline CSS, or CSS extensions supported by Microsoft. Details here: http://msdn2.microsoft.com/en-us/library/aa338201.aspx
  6. You can not use images as bullets;
  7. CSS cannot be used to define the layout of the message: a multi-column layout must created set using HTML tables. This is  because the "float" and "position" attributes are not supported;
  8. The box model is not fully supported. The layout is affected by the limited support of the "padding" and "margin" attributes.

Being aware of these limitations can save you a lot of headaches, and also ensure good compatibility with other webmail clients and with Lotus Notes.

Microsoft has also provided a tool for code validation, to verify compatibility with Outlook 2007:
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=23683

For a comprehensive guide on how to write a good HTML message, please see:
http://www.mailup.com/p/pc/create-good.html-email-message-d85.htm