Have you ever seen an HTML email image show up in an email editor or client inbox with a horizontal slice taken out of it, essentially breaking the image in two?
Here is an example a customer sent in yesterday.
So what the heck causes this HTML email horizontal image splitting and how can it be fixed?
The problem occurs when images are juxtaposed without space in an HTML table. Because there is no HTML standard for email, the issue surfaces periodically and varies from email client to email client. So, basically, it could happen to any image in an HTML email, and particularly to juxtaposed images embedded in tables in the HTML.
Firefox, Safari, Opera and Chrome users are the ones most often reporting the “mysterious gap” or horizontal break in images. For some reason, there don’t seem to be many reports from IE users.
How can I fix this mysterious gap or horizontal break in images?
Here are a few HTML Email Coding Tips to Fix Broken Images
1. The fix for most people is to add <style>img {display:block}</style> at the top of their HTML coding.
* Hotmail and Gmail have the same problem rendering juxtaposed images, but Gmail seems to require an additional, inline “img” tag step to resolve it.
2. For Gmail, just add style=”display:block” into the “img” tag for any broken images that appear to have this horizontal gap.
example:
<img style=”display:block” src=”myimage.jpg” alt=”HTML code to fix horizontal image gaps in email” />
3. Another fix is to add “line-height: 1px;” instead of “line-height: 0;” to the table cell containing the image. This seems to fix the problem in most email clients.
4. A final option is to set line-height to 1px in <td> cells within an HTML table and to set display:inline; border:0 in the img HTML. This approach seems to work for displaying images in FireFox, Chrome, Safari and Outlook 2007.
Interested? Creating HTML Email with images that aren’t broken is easy with our GroupMail Newsletter Software.