Code Fix for Gmail Rendering Problems

Posted by Bryan DrellerMay 17, 2010

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:

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.