The Lunch Pail: A Digital Marketing Blog

In 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:

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.