Code Fix for Gmail Rendering Problems

Gmail recently implemented changes to its webmail environment that are adversely affecting how images are displayed in most browsers. We’ve created the below FAQ that describes the changes and some simple HTML code inclusions that will rectify these image display issues.

What changes did Gmail make?
With their recent webmail update, Gmail now adds a few pixels of horizontal white space when a certain style reference is omitted. This is especially noticeable for images that are stacked vertically (like image slices) or for images displayed on a non-white background.

How can it be fixed?
Easily! Add an in-line style reference to control the image display. Note: Gmail does not support cascading styles which are those referenced in the head or style tags at the top of the HTML. So, it must be in-line. Here is an example with the additional style inclusion bolded:

PROBLEM CODE:

img src=”http://www.someurl.com/images/image.jpg” height=”100″ width=”100″

CORRECT CODE:
img src=”http://www.someurl.com/images/image.jpg” height=”100″ width=”100″ style=”display:block”
Note: This style element can go elsewhere in the img src tag if preferred
What browsers are affected?

We have observed this rendering issue in FireFox, I.E. 8, and various Webkit browsers such as Chrome, Safari, and some mobile devices.

What else should I know about this?
The practice of declaring the display:block style for images is already a best practice because Windows Live webmail also adds this white space to images if you don’t declare this (again visible in FireFox and Webkit browsers). But remember, Gmail doesn’t support cascading style sheets, so this style—and all other style references—must be referenced in-line, like in the example above.

A tad more on the Webkit rendering engine…
Although Google Chrome and Safari are the biggest browsers using the Webkit rendering engine, it’s important to note that Webkit is an open source project which means it is used by any number of HTML rendering tools; not just popular web browsers. Other notables include desktop email clients like Apple Mail and Entourage 2008 (also Apple) and numerous mobile. See here for a comprehensive list of applications that use Webkit.

minute read

Popular stories

Products

BriteVerify

BriteVerify email verification ensures that an email address actually exists in real-time

DemandTools

The #1 global data quality tool used by thousands of Salesforce admins

Everest

Insights and deliverability guidance from the only all-in-one email marketing solution

GridBuddy Cloud

Transform how you interact with your data through the versatility of grids.

Return Path

World-class deliverability applications to optimize email marketing programs

Trust Assessments

A revolutionary new solution for assessing Salesforce data quality

Solutions

Validity for Email

Increase inbox placement and maximize subscriber reach with clean and actionable data

Validity for Data Management

Simplify data management with solutions that improve data quality and increase CRM adoption

Validity for Sales Productivity

Give your sales team back hours per day with tools designed to increase productivity and mitigate pipeline risks in real-time