If you’ve ever had to design/build HTML emails for work or fun or whatever, you might have run into a bit of an issue getting your email to display consistently in the multitude of email clients out there. I tend to just test my emails in Gmail, Outlook, Windows Live Hotmail and occasionally Mac Mail.
I used to only test in Windows Live Hotmail using IE as I was resigned to the fact that it never worked properly in Firefox – until now! I finally got hassled into finding a solution for the only issue we had left – a 3 or 4 pixel gap appearing in between all the images.
It turns out the problem is the way the browsers in quirks and standards mode align images to the text baseline – the 3 or 4 pixel gap is there to allow room for the descenders of lowecase letters like “p” and “y” – even if there are no letters in the <td> with the <img> in it.
There are 2 things you can do to resolve the issue – force all the images to be aligned to the bottom of the <td> rather than the default (text baseline):
<img src="something.gif" alt="..." style="vertical-align: bottom;" /> |
Or you can take the issue out of the rendering engines hands and fool it by making all the images block-level rather than inline:
<img src="something.gif" alt="..." style="display: block;" /> |
I prefer the second option, but the first one should work fine too! 
Thanks for solve my 2 days worry!
Yes!
Great stuff; the second one did the trick. Thanks!
Thanks you so much for the great info. I’ve been trying to figure this out for a day!
(The second option worked)
I ran into this but the solution was slightly different for me, but the gaps that were being reported by FireBug were down to line-height on the image being set to 131% for some reason.
adding line-height:50%!important to the style seems to help.
JT
Thanks! resolve my problems and not only in Windows Live Hotmail