Removing the 3 pixel gap in Hotmail email

16 January 2008

An example of the 3 pixel gap

Hotmail has a bug where a gap of 3 pixels appears in between images, even when the IMG tags have no spaces separating them. To fix this annoyance I've found that adding style="display: block;" to the IMG tag fixes this. I apply the fix as an inline style to avoid the CSS filtering of web based email services.

You should end up with the following for images that need the 3 pixel gap removing:

HTML:
<img src="image.gif" width="100" height="100" alt="Image" style="display: block;" />

Categories: Web Design / Dev
Tags: , , ,
RSS 2.0 feed | leave a response | trackback

3 Responses to “Removing the 3 pixel gap in Hotmail email”

  1. Naureen On February 6th, 2008 at 5:55 pm , Naureen wrote:

    thanks a lot. helped a lot.

  2. <a href='http://www.urbanseven.com' rel='external nofollow'>Brenden</a> On August 11th, 2008 at 6:08 pm , Brenden wrote:

    Fantastic tip!
    I was using the solution:
    style=”vertical-align: bottom;” but getting mixed results.

    This seems to work every time.

    …Interesting to note that even hotmail msn emails (from hotmail) are broken with this bug.

    _B

  3. Thomas On August 11th, 2008 at 8:35 pm , Thomas wrote:

    Thanks for the fix! As a sidenote, I just noticed that this also seems to fix the HTML rendering issues in Outlook 2007 for Windows.

Leave a Reply

(will not be published)