Hotmail Image Problems in HTML Emails
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!
I had this problem recently. Strangely, it only affects Hotmail when viewed in Firefox and not IE.
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.
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”.
Doh! I meant “vertical-align: bottom”!
@Aaron, that’s interesting about vertical-align, it worked as well but it made the alt text look a little funky for me.
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!
Sheesh! Thank you for this post. You just saved my life.
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.
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.
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!
Thankyou VERY much for giving the tip with style="display: block;”
I had the problem with spacing between images in Hotmail and you just solved it for me.
Thanks a lot!
Amazing, been splicing Html emails and suffering this problem for years! all it took to solve it was one google search!
Many thanks, you’re a lifesaver! And if it’s of any help to anyone Safari / hotmail combination has the same effect.
Thanks again!
Next entry: Adding Microformats to Viget.com
Previous entry: Flash Goes Open Screen
Recent Comments
Hi Doug!
I just want to print this article :) But the print version is yet to be fully polished. I hope you guys spend sometime :) Viget inspire is a really nice resource for me....
- Lance on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Erik Wallace on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Jonathan on 'Switching Mindsets: From WordPress to ExpressionEngine'.
Subscribe to Comments RSS