Looks like Gmail recently made some changes to their interface, and it’s stripping out table cellpadding and cellspacing in HTML emails. Ouch.
There’s a teeny-tiny link at the top of gmail that lets users switch between "old version" and "new version". In the "old version" things work and look fine:
It appears as though using inline-css to define your cellpadding helps. Note that some people in the intertubes are complaining that some inline-css is breaking in gmail too (like line-height).
Since Google is technically a "beta" product, and since it’s free, and since they only just recently made these changes, we can’t complain too much or react too soon.
I have faith in almighty Google. They will fix this. If they don’t do it soon, I have even more faith in "The Chad" (our new programmer). He will modify our templates if we have to. But give it a little time. This kinda stuff happens all the time. Even Lotus Notes fixed most of their HTML email issues (eventually).
Here in Florida, we’re normally suspicious of chad … but I’m sure your Chad will fix this!
I’m experiencing this with Gmail presently. Has there been an update or a fix by this “Chad” of which you speak?
Heh. The Chad has been occupied with bigger projects, but “Le Mark” has fixed it, and it’s currently in testing. He plans to roll it out on Monday the 18th. The templates will use inline CSS to add padding, but will fail gracefully to traditional cellpadding for email readers that don’t support inline CSS (or for when Gmail switches things around on us again).
[...] thought for sure Gmail would fix the cellpadding problem that popped up last November, but I guess they did all that on purpose. Oh [...]
This is a great reference. Thanks for citing some of the known problems with this bug. And even reporting the bug for that matter.
I was trying to optimize my latest template for gmail and ran into line-height and padding as issues within my working files.
Keep up the good bloggin. It’s nice to know there are others out there helping us besides CampaignMonitor.
thx!
//sean
Sure thing. Good God your website has got some cool flash stuff going on there.
my solution was to add padding style to each cell
You posted this on: November 19th, 2007. Its now July 6th 2009 and Google hasn’t fixed the problem. :S
I’m having a similar problem. gmail is adding space below images in table cells. have to use the ol’ photochop technique for a clients design. 3 rows, 3 cells, 3 images. looks fine in every browser inc. Chrome. puts about 5px of whitespace at the bottom of each image in gmail. tried inline css set to 0 and to none. still no workie.
Hi Stan, I wonder if this is related: http://www.returnpath.net/2010/05/gmail-recently-implemented-cha.php
awesome, thx Ben. I tried every style declaration I could think of in every tag but that one. even tried removing table and just putting tags.
Hey, thank the dude at RP for posting that. Everything’s always changing in email design. And this, by the way, is why I always say: “HTML Email design must be strong, like ox. But adaptive, like monkey.” http://resources.mailchimp.com/email-jitsu
I’m still amazed you’re still on top of a 3 year old thread on gmail bugs, and also already knew of the fix to the new one posted on another site. I did google but didn’t find that one. found this one. the chimp rocks! long live the chimp!
Hi Ben & Stan!
What’s that TAG you couldn’t think of?
The supplied link is being redirected and myself is getting mad to solve this padding Gmail problem.
Thanx in advance for the reply and the mighty marvellous work shown here about the fascinating HTML email world.
Hi!
Could you please what was that tag you couldn’t think of?
I tried to follow the suggested link but it gets nowhere.
Thanx in advance,
hip
That link doesn’t seem to be working anymore
Can you please tell us what the fix was exactly? Thanks!
If you’ll add style=”display:block” to your img tags it should solve the extra space issue in Gmail. Worked for me at least.
Christian,
I was looking for the extra space issue for 4 hours….
Then i tried setting all imgs to display:block
worked like a charm!
Its really weird jumping back to tables after coding in divs for years
Thanks again!!
@Andy,
Glad it worked out for you. HTML emails are quite the flashback, that’s for sure.
Hi,
I was also having the same problem.
I used: as advised and it solved it.
Thank you!
Christian you are my saviour…
This gmail white space issue was killing me!
to be a bit more specific to save anyone else looking for this fix, here is the image tag code that worked for me:
<img style="display: block;"
Cheers,
Tim
thought I would mention.. when using an image in a TD by itself, the TD automagically resizes in gmail for some reason, giving it an illusion of padding after the image. I was able to fix this by setting the background attribute of the TD to the image’s url, instead of placing the image in an img element.
@Funky, Setting an image as the background in an HTML email is not the best solution as some email clients won’t display it correctly. To fix the padding issue, set display:block in your image styles