Encoding newsletters: the bloody gaps between images

Encoding newsletters is a dirty job – tables, spacers, no proper CSS styles and to make it even more difficult email clients read all this differently. Probably the most common problem I have seen so far are gaps between images. It seems that a lot of people already gave up on them.

These few pixels of emptiness make it impossible to create newsletter with text placed in middle of a huge image. And text is good – it makes your newsletter look less like spam.

gaps
Solution is incredibly simple:
The default line height in most email clients isn’t set to zero. All you have to do is take care of it.

For the main table that holds everything set this
style="line-height:0"
and put this around your text:
[span style="line-height:18px"][/span]
It should work in most email clients.

Bonus:
excellent Guide to CSS Support in Email Clients from blog of Campaign monitor (PDF)

4 Comments

  1. Posted March 10, 2011 at 10:35 | Permalink

    IMHO, style=”display: block” on images is cleaner, more reliable and easier to implement since you’ll obviously have more text blocks than images ;-) You can even do one search & replace when you’re code is complete. Compatible with 100% of email clients/webmails (verified using Litmus.com). Of course you don’t want to add this to images that really should be inline.

    • Posted March 21, 2011 at 13:44 | Permalink

      Hi, thanks for information about this one. It really is easier.

  2. Tomas
    Posted May 2, 2011 at 09:44 | Permalink

    display:block does the job – we use it in our newsletters for MS.

  3. HJR
    Posted May 26, 2011 at 12:55 | Permalink

    style=”vertical-align: bottom” works just as well in cases you don’t want the image to actually display like block.

Post a Comment

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post thumbnail

#182

365 ideas is my personal creativity training. It's finished now.

See all the images.