The Mystery of Hotmail’s Strange Image Spacing

The Case of a Hidden Escape Character...

It's official, there's an invisible ghost haunting Hotmail and it had us spooked for over 3 days! OK so we don't mean Friday the 13th scary, but still scary to a programmer who doesn't see it coming!

Turns out it isn't a ghost at all, it's a Microsoft supported escape character which Hotmail adds after every image. As you can rightfully assume, it doesn't lurk in IE but it does in Firefox, Safari, Opera, and Chrome. Since these browsers don't support the escape character, they read it as a special character without any horizontal width (our proverbial sheet over the ghost). That, matched with Hotmail's default CSS (line-height:normal;) creates a vertical space below every image - ah ha - mystery solved!

Whew! Moving on...
Once we figured it out, the next challenge was to simulate the issue in our Email Test. In the end, we are happy to report that we where successfully able to simulate the exact same spacing issues inside FF, Opera and Chrome no matter what size your images are.

This issue of course brings us back to our ongoing question: Should we support multiple web browsers when running our Email Test? So far, the obvious answer seems to be "yes" - considering the fact that results will clearly vary from one browser to the next when it comes to web based email clients. In fact, we feel inclined to simulate your email exactly the way it will look when viewed in the browser you are running your test in.

With all that said; at this time we recommend that you test your HTML/CSS email in the following order:

Step 1.) First, test your email in all the popular web browsers (IE 6, 7, 8, FF, Safari, Opera, and Chrome)
Step 2.) Then run your email through our Acid Test in Firefox for a few reasons...
             a. This will ensure that you see the infamous Hotmail ghost (if it applies to you)
             b. Firefox is the web browser that we have done most of our testing in to date

So what's the solution?

There are several possible work-arounds for this issue, be sure to check out our follow-up post: 12 Fixes for the Image Spacing in HTML Emails