When coding a newsletter with HTML, there are several email clients you must account for and each has a slightly different way of handling images. If you’re using Hotmail, Gmail or Outlook you may have noticed a thin white band or gap splitting one or more of the images in your HTML email. This also seems to be a problem with users of Firefox, Safari, Opera and Chrome (though not Internet Explorer).

For Hotmail users, correcting the issue requires the simple insertion of the following code into the top of your HTML file:

 

<style>img {display:block}</style>

If you’re using Gmail, an additional code is needed for individual images. Inside the image HTML, add this code:

 

<img style="display:block" src="exampleimage.jpg" alt="example" />

Google altered the way it displays images in mid-2010, which is when these gaps started to appear. So make sure to go through all, if any, of your email templates and newsletters that you still use from this time. Also make sure to send test emails to multiple email clients and open them with different browsers and hardware whenever possible to ensure that your newsletter is being displayed properly.

For more information on engaging with multiple browsers, click the link to learn how to Test Your Email Campaigns for Readability.