Coding emails that that look pixel perfect in every email client is an ongoing challenge. While performing routine rendering tests, our code team with the Responsys Creative Services came across a new issue with Outlook.com and Hotmail: sometime over the weekend hotmail updated their rendering to ignore margin properties. The results causing spacing issues on the intended placement of HTML text. The coding Blog, Email on Acid, has posted a quick fix here. This fix causes other rendering issues however, when viewed in Outlook 2007/2010. The Responsys code team is recommending the following:
Instead of using the padding or margin properties on text containers (which are usually div elements), we recommend using a nested table to hold the text. This allows us to use an extra TD cell to put widths on either side of the text. Instead of using margin bottoms, we recommend instead be using table spacers (one row/cell tables with heights) to get spacing between paragraphs.
The Retail Email blog will keep you posted with updates as we get them. It remains to be seen if this change from Hotmail will be permanent, or if it will be resolved shortly. The Alert: Hotmail converting some symbol characters into images issue we reported on last April was unintentional on the part of Hotmail, and the rendering issues were resolved shortly.
UPDATE #1: Our Responsys code team has devised an improved alternative code fix to the issue. Since Outlook 2007 & 2010 supports style tags we are recommending to use a class for the margin for Outlook that overrides the padding with !important.
Here is a screenshot the code sample below: