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!

Hotmail Style Preview

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

6 thoughts on “The Mystery of Hotmail’s Strange Image Spacing”

  1. i’ve been using the display:block hack for a while now, and it works flawlessly. the only bummer is i like to style my alt text (wrap your image in a span with inline css) and most of the time having it centered in its container would be ideal (i like my emails to be as pretty without images as they are with), but display:block floats everything to the left—even if you have your table cell and text aligned to the center. 🙁
    but i’ll live with that if it means no ugly spaces.

  2. Using display:block does not fix the issue nor changing doctype.
    Nor align=”absbottom” as I can’t have any padding at top or bottom of the image

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies