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

I’ve found a handy little plugin for Photoshop that lets you save files out in the .ICO format – handy for making favicons for your website!

http://www.telegraphics.com.au/sw/

Download the “ICO (Windows Icon) Format” in Mac or Windows format, unzip and copy the “ICOFormat.8bi” file into your “File Formats” plugin folder located in “C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats”. If you have Photoshop open, save your work, close it and start it again.

You should now see “ICO (Windows icon) (*.ICO)” in the “Format” menu when you try to save a file.