Question

Why can't HTML emails support normal positioning and HTML tags.

Is there a specific reason for simple css rules like float and background-image not to work ? I can't imagine these could present any security issues that we don't already have in normal emails?

I would like any answers to be based on reliable sources/ references and to explain the fundamentals of this behaviour within email clients.

Why are HTML emails not following normal web standards when it comes to HTML and CSS.

Was it helpful?

Solution

Some general info on HTML emails:

Here's a nice article which gives tips concerning HTML emails: the Do's and Don'ts of HTML email

My own interpretation of the CSS problem is the following:

HTML is a markup language, this means that the email program needs a HTML parser to read it.

Also, as you know, not all browsers use the same rendering engine or rendering rules. Just as with browsers, this is the same for all HTML parsers: each parser will differ a little bit.

And so the reason why float doesn't work, is simply because the implemented HTML parsers that the email clients use, are not 'good' in interpretating layouts based on float.

I quote:

Because clients like Gmail and Outlook 2007 have poor support for float, margin and padding, you’ll need to use tables as the framework of your email.

Hence it is recommended not to use floats but that doesn't mean they definitely won't work. It depends on the email client and how well it supports CSS.

I highly recommend you check out this list which shows CSS support for the major email clients:

The Ultimate Guide to CSS in HTML Email

and you can download the complete guide here: complete CSS guide for all 18 email clients

To conclude:

Just as with websites, different email clients have different CSS interpretations and rules. Some email clients even ignore specific CSS rules. The best solution is to be on the safe side and only use CSS that all (or most) email clients support.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top