More HTML Email Tips: Dealing with Quirks, Part 1

Mike D'AgrumaOver the past few months, I’ve provided several tips for working with HTML in emails. Check out the full collection of tips below:

Today, I’m going to address how to deal with a common quirk in HTML emails: alignment issues.

One of the most frustrating aspects of web design is that no one browser behaves exactly like another – they each render certain elements in their own way, accept certain CSS styles while ignoring others, etc.

The same principle applies to email clients. Content that renders perfectly in Mac Mail might break in Outlook. Bulleted lists that look clean and neat in Outlook might become a mess in Gmail. Borders that line up in Gmail may not align properly or even display in Hotmail.

You get the idea.

Every system has its quirks, but every quirk has a workaround. Let’s examine the first one:

Quirk No. 1: Text you want to left-align is aligning anywhere but left.

In most email clients in Internet Explorers 8 and 9 (particularly Gmail and Hotmail), every data cell in a nested table will inherit whatever alignment was set in the parent cell. So if you had a TD tag with an align “center” command and then had a table inside of that, every cell in that table will get align “center.”

In this instance, the workaround is to always set your alignment at the table level. So instead of:

Read part 2 here.

2 Trackbacks/Pingbacks

  1. […] The Lunch Pail « More HTML Email Tips: Dealing with Quirks, Part 1 […]

  2. […] with Quirks, Part 1 « The Lunch Pail Posted: August 23, 2012 in html, Marketing 0 More HTML Email Tips: Dealing with Quirks, Part 1 « The Lunch Pail. Share this:LinkedInTwitterDiggBloggerLike this:LikeBe the first to like […]

%d bloggers like this: