2

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.

Jean-Paul
  • 19,910
  • 9
  • 62
  • 88
Malibur
  • 1,695
  • 5
  • 22
  • 31
  • You're asking for opinions (as I doubt the people who wrote the mail clients will reply here); such questions don't belong on Stack Overflow. – Andrew Morton Apr 05 '14 at 20:36
  • @AndrewMorton: I doubt he is asking for an opinion. Rather it seems that he would like an explanation why normal CSS rules do not always work in email clients (such that he can explain it better to his clients in the future). – Jean-Paul Apr 05 '14 at 20:59
  • Question is now not primarily opinion-based anymore – Jean-Paul Apr 06 '14 at 12:30
  • Outlook '07, '10 & '13 use the MS Word render engine, while previous versions use an [old version of IE](https://litmus.com/help/email-clients/rendering-engines/) called "Trident". That explains their limited support. Meanwhile, web-clients don't allow anything that could interfere with their page. Imagine `position:fixed;` for example in Gmail. Other clients like Mac and Thunderbird render with Webkit/Gecko and have excellent support, it's just designing for the weak links that are holding email back. – John Apr 07 '14 at 13:38
  • See [this link](https://litmus.com/blog/desktop-rendering-issues-focus-initial-testing-on-a-handful-of-rendering-engines?utm_source=helparticle) for more info on desktop clients. See [this link](https://litmus.com/blog/webmail-rendering-explained-why-preprocessors-are-the-enemy?utm_source=helparticle) for webmail. – John Apr 07 '14 at 13:39

1 Answers1

4

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.

Community
  • 1
  • 1
Jean-Paul
  • 19,910
  • 9
  • 62
  • 88
  • The link at the top is from 2006, IMO most of the points don't hold much weight today (2014). – John Apr 07 '14 at 13:36
  • @John: Anyway, the link at the bottom is still recent and that's my main point. – Jean-Paul Apr 07 '14 at 18:58
  • True. I just found the content of the link to be misleading of today's general opinion of html email. Felt it needed a caveat for those who stumble across this thread. – John Apr 07 '14 at 19:29
  • 1
    @John: Agreed. I've substituted two new links which better explain it. – Jean-Paul Apr 07 '14 at 20:06
  • Here are more [general email links](http://stackoverflow.com/questions/2229822/html-email-best-practices-considerations-and-how-to-write-code-for-outlook-gma/21437734#21437734). – John Apr 07 '14 at 20:12