browser icon
You are using an insecure version of your web browser. Please update your browser!
Using an outdated browser makes your computer unsafe. For a safer, faster, more enjoyable user experience, please update your browser today or try a newer browser.

HTML Email Gaps Between Tables and Images in Gmail

Posted by on May 17, 2011

After nearly all day of struggling to figure out why a recent HTML email didn’t look right in Gmail, we finally found the answer.

We coded the template and sent out test emails from MailChimp. It looked perfect in Outlook, Hotmail, Yahoo and others, but there were gaps in between tables in Gmail and gaps around some of the images. We used FireBug to try and pinpoint the problem, but even stripping all styles out didn’t work. We even took out all spacing between lines of code. This didn’t solve the layout problems in Gmail either.

We then switched to StreamSend, because we thought it might be some of the styles or other additional code that MailChimp was adding in. Nope. Same thing. HTML Email looked perfect everywhere else, but not Gmail.

After spending nearly the entire day troubleshooting, we finally found the fix.
You have the add a display-block style to every image tag in the email and it will display perfectly in Gmail.

Here is an example image tag with the style added to fix the Gmail issues:

Hopefully this will help you as much as it helped me.

Leave a Reply

Your email address will not be published. Required fields are marked *

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=""> <s> <strike> <strong>