MindComet

Fix for Gmail Image Rendering Issues

Gmail has recently changed the way they interpret and display code. Most noticeably, this has caused a number of emails to render incorrectly. The broken Gmail emails are suffering from the same symptoms—horizontal lines between rows of images—Hotmail was encountering recently. Find my post about that issue here.

The same fix that applied to the Hotmail issue also applies here. Simply include img {display: block;} inbetween the style tags of your email and that should do the trick. If you want to be even more thorough, you can apply the same bit of code inline. Example:

<img src="images/header.jpg" style="display: block;" />

If there are any other ways of fixing this issue, please comment your findings below!

View Comments

Posted by Bryan Quilty on May. 17, 2010

The Hotmail / Firefox Line Break Issue Is Resolved

Have you ever come across the consistent issue of line breaks in your email design in Hotmail using Firefox?

One consistent annoyance I’ve always encountered has been testing an email in Hotmail with Firefox. For some reason, this combination of client and browser generates horizontal line breaks in emails. I never knew why… until now.

After some digging, Smith-Harmon has discovered that a simple bit of code is the purest remedy for this issue. At the top of the email (before the opening TABLE tag), make sure you include this:
<style>img {display: block;}</style>

It’s that simple. You can also accomplish the same effect if you code each image individually with the “display: block” property / value. For example:

<img src="images/header.jpg" style="display: block;" />

Kudos to Smith-Harmon for this useful shred of knowledge!

View Comments

Posted by Bryan Quilty on Mar. 02, 2010