Hotmail Image Problems in HTML Emails

Keith Muth, ON THE TOPIC OF CSS and Favorites and Tips and Tricks

May05 10

Working with HTML emails can be tough with all the various email clients out there. Just ask Jim Basio, who wrote a great post on our blog with some really useful resources. Recently I was working on an HTML email that had a lot of images, and for some reason Hotmail displayed the images with weird spacing. Let's pretend the picture below is actually three separate images in an email viewed in Hotmail:

As you can see, there is a gap between the images. We can fix this with one simple addition to the image style with CSS:

<img src="image.jpg" alt="Viget Logo" style="display: block;" />

And that's it. Just put "display: block" on any image in your HTML. I put it inline because there are still issues with email clients reading the <style> element (for example, Hotmail). Your images should now be in the right place:

The good news is that it doesn't affect the way images are displayed in other email clients. If you have other useful tips for HTML emails let us know!

UPDATE: This problem only seems to happens in Hotmail when using Firefox (although I feel like I saw it in IE before...). Another good tip, from a reader named Jurre-Jan Smit, was that you can just put the code in the <style> element in the <head> (for Live Hotmail) and <body> (for old school Hotmail) so that you don't need to put it inside every image. I just tend to use inline styles in emails because they're more specific. I've found Campaign Monitor's guide on CSS support in emails very useful for answering compatibility questions. Keep the useful tips coming!

Charlie said on 05/05 at 04:06 PM

I had this problem recently. Strangely, it only affects Hotmail when viewed in Firefox and not IE.

Marc Amos said on 05/05 at 05:21 PM

Presumably, this is because Hotmail’s style sheet doesn’t already set images to block-level, and if that really is the case, then the images are doing what they’re meant to do, since they’re line-level elements, and that is to respect line-height values (resulting in the space underneath each image).

Or, I’m just bonkers here.

Aaron K. said on 05/05 at 05:29 PM

The same type of thing can even happen in “regular” Web sites that fully utilize valid HTML and CSS. You can use “display: block” on the image, or you can also use “vertical-align: middle”.

Aaron K. said on 05/05 at 05:30 PM

Doh! I meant “vertical-align: bottom”!

Keith Muth said on 05/06 at 04:35 PM

@Aaron, that’s interesting about vertical-align, it worked as well but it made the alt text look a little funky for me.

Kimmo said on 05/07 at 01:39 PM

I actually ran into similar problems recently and applied “vertical-align: top” to fix things. It would seem that Firefox applies leading incorrectly (well, it’s hard to say if this really is incorrect as the specification for the inline element layout model is infernally complicated) for inline elements that are taller than the current line height and are vertically aligned to middle. I guess it would be worth experimenting if using different line heights had any effect regarding this matter.

BTW: Compliments on spectacular results with the whole viget.com!

Alanna said on 05/29 at 01:34 PM

Sheesh! Thank you for this post. You just saved my life.

Keith Muth said on 05/29 at 01:45 PM

Alanna, that’s great! I’m glad that little tip came in handy for you. Another issue I heard about recently was table borders putting the same kind of space around images and content (eg. Apple Mail) even though the table had border="0" in it’s attributes. The issue was solved by putting style="border-collapse:collapse;" on the table. Just something to keep in mind if a table borders start driving you crazy.

Jurre-Jan Smit said on 05/30 at 10:03 AM

It’s hard making newsletters cross-client compatible, i’ve gathered some experience though.

About this fix…

I believe you can actually put this in the head! You only need this fix for hot/livemail and this is one of the rare clients that actually reads the head.

Mark F said on 06/17 at 01:02 PM

I’ve been trying to fix this FF/Hotmail spacing problem for about 2 hours now. I’m sure you’ve saved me at least another 2 hours. It totally handled the problem.

Thanks for posting this, Keith!