Wednesday, May 26, 2010

Gmail Rendering Changes

As if the awkward rendering of most emails on Gmail wasn't poor enough already, they have made a few tweaks which result in extra white space around images.

Fortunately, there is a pretty simple CSS workaround for the problem. This is similar to the Hotmail/Firefox rendering issues widely reported recently, but in this case Gmail ignores the display block tag when it is applied as an overall style. So it must be added inline to each and affected image. Plus, the Gmail rendering issue appears to be happening in most browsers, not just one, making it much more vital to fix.

Here is the additional code you need to add to each img src tag:
style="display:block"

Like so:
<img src="http://www.domainname.com/images/image.jpg" style="display:block" height="150" width="300">

You can, of course, place the style wherever you like within the img src tag.

No comments:

Post a Comment