philip j. leitch/words/10px_spacer.gif_win

• words
• farchives
• photos
• login
• register

10px spacer.gif win!

posted Thu, December 30, 2010 - 1:33 pm.

For the past year and a half my job requires that I do a lot of html that is going to be viewed in email clients. I would estimate that 75% of my work time is spent either designing or coding html email. So that means a lot of old-school, 90s table in a table in a table in a table and spacer gifs galore. While it isn’t as glamorous as my previous job I get to work at home and if I can say so myself I am a total fucking master of putting tables inside of tables inside of tables now.

Anyway, Outlook 2007/2010 has been my biggest headache (i’m leaving older versions of Lotus out of this since I highly doubt anybody that actually is forced to use it expects much from it) until yesterday. Yesterday, I made a giant leap forward in forever banishing those Outlook headaches.

Enter the 10px by 10px spacer.gif.

Numerous people on the web claim to be the inventor of this html hack so i’m not going to give credence to any of them, just to say they are out there and you can find them if you know how to work the Google. The other part of my personal fix was to be sure the preceding block of copy had a <br> tag after it but before my spacer.

In my case the spacers were mainly causing Outlook problems when they were used in place of paragraphs or line breaks between copy. See, the client likes things to be precise and “just like the design” so we sometimes revert to using spacers to match the design spacing. But Outlook 2007/2010 for whatever reason refuses to let you resize a spacer.gif if it is under 10px square.

Try it, it won’t work. Say you want a 1px spacer to be 200x10 and you end up with a spacer that is 66px wide. I can’t explain it. None of the fine people before me that found the glitch in the first place can explain it.

But use a 10px spacer and you can resize it to your heart’s content. Bigger, yup. Smaller, yup. It just works.

Just remember though if you’re using it to mimic paragraphs you need to use that <br> tag otherwise Outlook will try to put the image after the last word in the preceding paragraph. And no, display: block; doesn’t help, I guess Outlook also ignores that useful bit of HTML email code as well.