Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
This video shows common problems you might encounter when you send an HTML email to Outlook, along with solutions. The typical issues you might find with Outlook have to do with borders around images, background images, floats, and margins versus padding. Let's start with image borders. By default, Outlook appears to attach borders to all images. As a result, you need to add the style border:none to every image that you don't want a border around.
This will fix the problem. The next image you might find with Outlook has to do with background images. Outlook 2007 and 2010, for example, do not display background images. Here is a solution from the Campaign Monitor blog, and the URLs are in the exercise file, but here's the code. You need to add Microsoft VML code. You open the code up here and you close it down here after the content.
So you need to put content between two chunks of VML code. Within the VML code there are several important details. One, you need to define where the background image can be found. Two, you need to define the height and the width in two separate places within the VML code. It's up here, and it's down here, and this height and width must match the height and width of the TD cell and the image that's being used as the background image.
This approach will display background images in Outlook 2007 and Outlook 2010. The final issues you might find with Outlook have to do with floats and margins versus padding. It's never a good idea when you code HTML email to use floats. Instead, at the TD level, the table- data level within your HTML tables, use the valign and the align elements to define whether data floats to the left, to the right, or the center, the top, middle, or bottom.
In addition, Outlook is more likely to respond to margin settings than it is to respond to padding. You may find, for example, that you use padding in your email design. When you test it in Outlook, however, the padding setting is ignored. If that's the case, simply switch padding for margin to see if that works. You can find the latest on Outlook compatibility with CSS at the Guide to CSS support that Campaign Monitor publishes on their web site.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 74968 Viewers
80 Video lessons · 129939 Viewers
52 Video lessons · 64112 Viewers
59 Video lessons · 49906 Viewers
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.