Resolving gaps and spaces in table cells when using the HTML 5 doctype

Filed under: web development

comments (16) Views: 33,557

While building an HTML email for Goba (new site coming soon) I decided to use tables for layout rather than pure CSS; sadly the dizzying array of email clients make tables a far more reliable medium for this sort of thing. Into one cell I placed an image to be used as the top section of a rounded corner box. It looked great in every browser that I used to preview the email, but when I sent it out and checked it in GMail, there were mysterious spaces around each cell whose only contents were images. In my case, there were 4 of them.

After trying Firebug I turned to the internet where I learned that the HTML 5 doctype, used by Gmail, adds some mysterious spacing inside table cells when their only contents are inline elements. Turns out that the fix is to convert the inline element to a block level element with CSS. Here's an example with no doctype, and borders on the table turned on. To see the issue, remove the style attribute from the top and bottom image. Hope this helps someone else.

Amazon logo

If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!

thanks!

john b - January 19, 2011 03:04 pm

Thank you for the tip, it worked like a charm. I've been pulling my hair out trying to fix gaps in my html email.

Jasmine F - May 02, 2011 02:07 pm

Thanks Andy!

Jason Buchanan - May 11, 2011 10:43 am

Thank you - this was driving me nuts.

Nicholas Spagnoletti - September 21, 2011 01:46 am

Thank you for the tip! This worked perfectly for my site- I too have been pulling out my hair. Great job and keep up the awesome work! :)

Dark - December 21, 2011 12:01 pm

My pleasure Dark. Glad it helped you out.

andy matthews - December 21, 2011 07:07 pm

Thanks very much for helping and being so succinct.

Christa - March 05, 2012 09:36 am

Yes, this definitely helped me. Thanks.

Elaine - April 07, 2012 12:18 pm

Again, thank you...I have been trying to fix a gap in a table for HOURS...finally this fixed it.

Martha C Payne - April 21, 2012 12:51 am

Thank you!!

Jody Kaufman - April 27, 2012 12:33 pm

Andy, thank you, thank you, thank you!!! I was lost in the dark and you enlightened me. Thanks again, dude.

Michel - June 21, 2012 02:20 am

Michel...this is one of those issues that drives people up the wall. Glad it helped you out.

andy matthews - June 21, 2012 01:41 pm

you sir, are a gentleman AND a scholar. thank-you so much.

Nick - July 06, 2012 03:03 pm

You rock!!!

Joe - August 19, 2012 10:25 am

I had a lightbox that was not working correctly until I added the DOCTYPE tag. Unfortunately, this caused the black lines.

Thankfully, I found your article to fix everything.

Thanks so much!

Tom

George Spelvman - December 09, 2012 12:32 am

Thanks for this solution. You're really save my life I needed this solution for a project and that's now solved

James - March 19, 2013 12:30 pm