Gmail Image Gap - Can't use img {display:block}

Hi Guys

I hope this isn't too cheeky... We've got a client that insists on using another email provider... I know, what "monkeys"!

Their editor seems to strip img {display:block !important} when you change out a default image. It strips it when applied to the image as an inline style and if you have it in the CSS.

Can you wrap the image in something to stop the 5px gap in Gmail to get around the issue of display:block not being applied?

Again, sorry to hijack to CM forums - but I've been trying to fix this for 2 days, hundreds of tests!

And yes, put the same template in CM and it works fine!

Redferret, 3 years ago

have you tried align="left" or align="right" on the image?


Gmail app apologist
JohnP JohnP, 3 years ago

Maybe putting the image in a table with style="table-layout:fixed;" might work...

roshodgekiss roshodgekiss, 3 years ago

Good suggestions above - my only contribution would be to try table, td { border-collapse: collapse; } as well. And don't worry, everyone is welcome here, especially our simian colleagues :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
edm, 3 years ago

Thanks for the suggestions everyone.

@redferret: aligning didn't help.
@JohnP: added table-layout:fixed; but that didn't help either
@roshodgekiss: that little CSS nugget is part of our default setup - CM templates have taught us well, grasshopper :)

Oh well... have told the client that we need to design around the issue.

On the upside, I got a CM template created, tested and ready to go in under an hour yesterday!

alluremail alluremail, 3 years ago

Not sure if this is of use but try adding style="font-size:0;" for all table cells that only contain images. Example below.

<td style="font-size:0;"><a href="http://www.link.com"><img height="60" src="http://www.domain.com/image.jpg"></a></td>
edm, 3 years ago

ladies and gentlemen, we have a winner!

@alluremail > thank you! that did the trick :) can't tell you how much I appreciate your help... this has been turning my head inside out for 2 days!

alluremail alluremail, 3 years ago

@edm: you're welcome. glad to help. I found out about this workaround here and have been using it on many EDMs - http://www.18aproductions.co.uk/news/view/horizontal-spaces-between-images-in-gmail-html-emails - the only drawback is that font-size:0 will prevent the image's ALT text from displaying (when images are off).

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098