Fixing Two Basic Email Quirks

Working with emails is like traveling back in time to when Internet Explorer had the majority market share and tables were still popular for layouts. Unfortunately, email clients are stuck in this time frame (looking at you Outlook) and when developing emails you have to throw out a lot of modern techniques.

Two issues I discovered when working with emails are background images and image width.

Background Image and VML Spacing

Every major email client except Outlook supports background images. However, the great folks over at Campaign Monitor found a way to make background images happen in Outlook and thus created Bulletproof Background Images. This approach uses a VML element wrapped in an IE conditional. From there, you have your content either wrapped in a table or div.

In cases where the background VML is applied to a single cell, Outlook will create a gap (empty paragraph) at the end of the VML. To prevent this ruining your layout, wrap the parent container of the VML with line-height and font-size both set to 0.

Image Width

Outlook does not respect an image’s width unless you add a width attribute with the set width without a unit declared (so no px).

Also, always refer back to the CSS Support Guide for any questions if you can achieve something in an email.