CODEWITHSUNDEEP
htmlcssemailinlinenewsletter
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20173

Why are there spaces between the images in my newsletter when it’s sent?

I have a newsletter to send, but some extra spaces appear between the rows in Yahoo, Gmail and MSN.

But this is what you see (funny that in jsfiddle it’s the same as Yahoo etc.) — notice the grey bars between the images:

All borders are 0, all margins are 0. Do you see anything?

Tried with:

<table width="640" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;border-spacing:0;">

but still the same.

Upvotes: 2

Views: 2315

Answers (3)

Stefan
Stefan

Reputation: 5662

This seems to solve it;

a {
    float: left;
    line-height: 0;
}

...but it also causes some other damage to the footer.

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98906

Adding this:

img {
    vertical-align: top;
}

fixed the fiddle for me in Chrome 15. I couldn’t swear that this will apply to the various mail clients too, but it might work.

When I have to do HTML e-mails I use Email on Acid to check the results in various mail clients. It’s worth a look.

Upvotes: 6

Sarah West
Sarah West

Reputation: 2037

Try do add the following CSS to your Code

a {
  display: block;
  float: left;
}

And add to each a the height of the image inside. That should remove the gaps in the table.

Take a look at the jsfiddle (I only did the changes for the first row)

http://jsfiddle.net/FmyS5/9/

Upvotes: 0

Related Questions