Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
This video shows common image-related problems that you might encounter as you code and test your HTML email, along with solutions. The most common image-related problems that you will see have to do with gaps, borders around images, and setting the background to a table or table data cell. Let's talk about each of those. First of all, of your image tags should have this basic code. In addition to the source, obviously, which should be an absolute URL to a specific image on a web server somewhere on the Internet, you also should specify the height and width, as well as the alt tag. The alt tag will display if images are turned off.
In terms of image-gap problems you want these styles at a minimum. You want display set to block for Hotmail, and you want borders set to none for Outlook. The borders set to none will also solve the problems related to Outlook showing borders around all images regardless. In addition, you may want to style your image tags to have the margins and padding set to zero, and don't use shorthand--you'll need to specify margin-top, padding-top, etc.
Another image-related problem that has to do with gaps involves older email software. In old versions of Lotus Notes email, for example, you may find a gap underneath the image tag. Sometimes this is caused by the table data cell being on a new line. The solution is to bring everything up into a single line, like this. The third-image related problem has to do with background images.
This solution that I will show you is from the Campaign Monitor blog, and the URLs are in the exercise files. The main problem with background images is the Gmail and Outlook 2007 and Outlook 2010 will not display background images. You have to do a little bit of a workaround. For Outlook, you need to add VML code, which is this block of code, and you put it before the content and you put it after the content to close off their VML tag.
The most important aspect of the VML code is to get the source of the background image correct and to specify the two instances of height and the two instances of width, and those height and width values need to match the height and width value for the table data cell and for the image. If you are careful, this approach will display background images in Outlook 2007, Outlook 2010, and Gmail.
Some image-related problems within HTML email often can be identified easily when you set the HTML table border to 1. This will let you x-ray your table rows and columns to find any gaps. These are the most common solutions to image problems that you may find while testing HTML email code.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.