Inbox Preview Now Checks For New Gmail Requirement

Our Inbox Preview tool is incredibly useful for checking your email marketing campaign CSS against support in major email clients. It tells you if what you have should be removed, and references the exact code that could cause a problem.

Recently we were alerted to a new Gmail issue that requires certain CSS be applied to <img> elements in your message body.

The issue only seems to occur through the Gmail web interface in Firefox, Safari, Opera and Chrome (not Internet Explorer). When you have images in table cells, an extra horizontal gap appears between table rows:

Here is how the HTML appears for the above screenshot:

It looks right in desktop email clients, as well as Gmail’s web interface in Internet Explorer:

As you can see, there is no horizontal gap between table rows.

It is suggested to add style="display: block;" to each individual <img> element, and with our own testing, this seems to work.

To aid in reminding you of this requirement, we’ve updated our Inbox Preview tool to check for all <img> elements in your message body that do not have style="display: block;" included.

This will be included as part of Gmail’s alerts:

(Due to the nature of this inconsistency, it’s possible this fix may not need to be applied to every <img> element in your message body. For example, images floating inside paragraphs probably do not need this fix.)

We are open to improving the logic of our Inbox Preview tool to most accurately reflect how different email clients treat CSS, so if there are other ways to resolve this issue, or if you notice unrelated issues that could be reflected in the preview, please let us know.

A trial is worth a thousand words.
Get started today, no credit card required.