Date Initially Written: 21 January 2010.
Problem: When viewing an HTML message in Outlook 2007 the layout is wrong due to spacer GIFs not being rendered to their correct size.
Software: Outlook 2007.
Background: A website I was working on was sending out email newsletters in HTML format. The messages used tables and spacer GIFs (1 x 1 pixel transparent GIF images called spacer.gif) to force table cells to be certain widths. The messages displayed fine in all email programs except Outlook 2007 where the table cells weren't as wide as I was expecting them to be. This caused display problems because the images weren't lining up correctly.
After some experimenting I found that Outlook was doing strange things with my spacer GIFs. Depending on the sizes I was trying to achieve, Outlook would display them correctly up to a certain size and then after that size it would display them smaller than I had specified. For example if I specified height=10 width=10 then Outlook displayed it properly, but height=10 width=200 wouldn't result in a square 200 wide but something smaller.
Resolution Steps: The fix is surprisingly easy and doesn't require any changes to the message markup. Instead just change the spacer GIF so that it is 10 x 10 pixels instead of 1 x 1. I think Outlook is maybe looking out for images that are 1 x 1 and treating them differently, maybe because they are often used as web beacons. Switching the spacer GIF to 10 x 10 pixels fixed the problem. Of course you can still set the height and width of the spacer GIFs to a size smaller than 10 x 10, so it's still possible to have them set to 1 x 1 and they'll still work as before.
Recommended Reading For HTML Emails: Create Stunning HTML Email That Just Works