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 Coding Tips for Broken Images in Email

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.

Do you have any HTML coding tips for broken images to share?

Not all email clients were created equal.

In fact, each one renders HTML email slightly differently.

Find out why, and how you can test your HTML email to see what it looks like in a Gmail inbox and in each of the other major Desktop, web and mobile email clients. You know, the email clients that the people on your mailing list use.

Interested? Each of our HTML template designs are tested before there are installed with GroupMail.

1. Believe it or not, there are still some people out there who have their email clients configured to receive text-only email. If you have a plain text only part for your message (designed for text-only recipients) they will receive a nice text-only message in line with their settings and you will get your message across to that important, albeit small, segment of your list.

2. One of the things that antispam filters look at is image-to-text ratio. For this reason, it is important to balance image-heavy HTML messages with some text. So if you are using a large image to get your message across, you’d be wise to include a plain text part for your message to satisfy antispam filters lurking between you and your customers.

So how do you add a text-only part to your HTML message? It’s actually very easy.

At the bottom of the GroupMail message editor, you will see several tabs. The middle tab says Plain Text Message Part. Click that tab.

Then, check the “Optional: Include a Plain Text only part with this Rich Text (HTML) message” and then mark the “Include the specified text as the Plain Text part.” Here, you can copy and paste or write a custom text version of your message, using text-only formatting as necessary. Remember that you can’t use hyperlinks in text-only messages, so you will have to use full URL paths (http://…) if you want to link recipients to a website.

The only people who will see the plain text version of your message are those recipients who have their email client configured to receive text-only email and antispam filters looking for some text to balance the images in your HTML message. Everyone else will only see your beautiful HTML email design.

• You can create a message in GroupMail’s own WYSIWYG HTML message editor.
• You can use one of our professionally designed and tested HTML email templates
• You can import an HTML email design that you designed externally and save it as a user-generated template.
• You can even import a web page into the body of your email, with all links active (Just open a blank message and click File/Import/Web Page)

We don’t recommend using Microsoft Word or Publisher to create your message as there is particular HTML formatting used in Word and Publisher that does not render properly in email clients other than Outlook or Outlook Express.

So the sky’s the limit, really.

Feel free to share your favorite HTML email designs with us if you want to showcase them on our blog. We love inspiration!

St. Patrick Template 1

St. Patrick Template 2

St. Patrick Template 3

These can be downloaded from here. To use them in GroupMail, extract the files from the downloaded zip, and in the Message Editor choose File->Import->HTML Document.

Personally the thoughts of drinking pints of green liquid doesn’t really appeal to me (tomorrow or any other day for that matter) , but regardless of whatever you get up to for St. Patrick’s day, I hope you have a good one !