Route of Queue

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! ;)

This entry was posted on Monday, August 10th, 2009 at 3:15 pm and is filed under Hints and Tips, Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.