More HTML Email Tips: Dealing with Quirks, Part 2

Mike D'AgrumaIn Monday’s post, I addressed a common HTML alignment quirk that you might encounter when creating your emails. Here are two more quirks and ways to work around them:
Quirk No. 2: Padding and margin inline CSS styles work in some email clients, but not others.

While padding and margin CSS styles are commonly accepted across all major browsers, not every email client renders them consistently – or accurately. For the most part, these styles can be used without concern, but to build a truly bulletproof email, they should be avoided. Before coding padding/margins into a table cell, a designer should always ask himself if he would be okay with how the content would display for a customer if the style were thrown out by the email client. If the answer is yes, then by all means use padding.

If the answer is no, a good solution is to simply put a non-breaking space in a table cell where width or height is specified. For example, if you needed 20 pixels of left or right padding:

The only problem with this solution is that a non-breaking space always has a height of about 15 pixels. So what do you do if you need top or bottom padding under 15 pixels?

Most designers will use a spacer image in this situation, not knowing their solution actually creates a bigger problem – increasing an email’s spam rating.

To avoid that very perilous issue, use this workaround instead:

In this situation, always make sure to set the font-color at a slightly different value than the table cell’s background color to avoid another quirky spam trigger. Also make sure to set the line-height to normal to ensure a parent table cell’s isn’t inherited.

Quirk No. 3: Superscripts create inconsistent line-heights.

Branding typically comes into play when building an email for a business client, and most prefer to have registered or service marks superscripted in their copy.

It seems simple enough, right? Normally, the following HTML tag is used:

When displayed in most email clients within the middle of a copy block, however, these superscripts seem to automatically add top padding regardless of what the table cell’s line-height is set to. To make this problem extra quirky, it seems to only do this to the line of copy it exists on, making for a very inconsistent display.

The workaround for this issue is to add some cross-client functional style:

To ensure the superscript displays well and is legible across all email clients, set its font-size four or five pixels less than the copy’s.

While every browser or email client has its quirks, but every quirk has a workaround. A passionate designer usually relishes these challenges, however. It’s always satisfying to come up with an alternate answer to a cross-browser or cross-client rendering problem.

One Trackback/Pingback

  1. […] Lunch Pail « A New Prescription for Digital More HTML Email Tips: Dealing with Quirks, Part 2 […]

%d bloggers like this: