Murray's Binary Bit Bucket
Home About Books Computing PlayStation Other Stuff
Hardware Problems | Software Problems
 

Outlook 2007 Spacer GIFs Not Working

 
 

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 PHP Programmers: Build Your Own HTML Email: Designing for the Inbox

 

Did you find my site useful? You can show your thanks
by making your next Amazon purchase through this website.
It won't cost you any extra and Amazon will pay me a small commission.

Search Now:  
Amazon Logo