Search code examples
imagehtml-emailhtml-tablehotmail

Hotmail - HTML Email Table image gap


Hotmail appears to be the only client which produces an unwanted gap in-between two tables carrying images. They should be nested directly against each other. The 'display:block;' (within the img tag) is not the solution because I have multiple cells and images next to each other (in that header section with the logo).

The extra vertical space seems to appear in the tr, td, or table tags in the header section. In Hotmail it creates a 92px height, in everyother browser its 89px (same height as the images).

(I cant post images yet - not enough rep.)

The code via jsFiddle.

I've tried playing with line-height and margin. I can't seem to get any adjustments to respond in Hotmail. Any leads? (I've read all the other html email gap questions)


Solution

  • Try setting cellspacing and cellpadding to "0".

    Since it's Hotmail you'll probably be able to troubleshoot the e-mail through your browser's code inspector (Chrome Inspector and/or Firebug). Try to find what elements are causing the gaps.

    It's not such a good idea to use margin in an e-mail since this can cause a lot of compatibility issues. How is this e-mail behaving in Outlook 2007/2010/2013?