Gmail not executing CSS in html mail (svnspam)_问答_开发者

I am trying to setup svnspam. The setup and configuration went fine. But when the mails are sent to my Gmail id, they do not have the coloured diffs.

Poking into the original mail through the Gmail view original interface I get to see the CSS like this:

<html>
<head>
<style type="text/css">
  body {background-color:#ffffff;}
  .file {border:1px solid #eeeeee;margin-top:1em;margin-bottom:1em;}
  .pathname {font-family:monospace; float:right;}
  .fileheader {margin-bottom:.5em;}
  .diff {margin:0;}
  .tasklist {padding:4px;border:1px dashed #000000;margin-top:1em;}
  .tasklist ul {margin-top:0;margin-bottom:0;}
  tr.alt {background-color:#eeeeee}
  #added {background-color:#ddffdd;}
  #addedchars {background-color:#99ff99;font-weight:bolder;}
  tr.alt #added {background-color:#ccf7cc;}
  #removed {background-color:#ffdddd;}
  #removedchars {background-color:#ff9999;font-weight:bolder;}
  tr.alt #removed {background-color:#f7cccc;}
  #info {color:#888888;}
  #context {background-color:#eeeeee;}
  td {padding-left:.3em;padding-right:.3em;}
  tr.head {border-bottom-width:1px;border-bottom-style开发者_运维知识库:solid;}
  tr.head td {padding:0;padding-top:.2em;}
  .task {background-color:#ffff00;}
  .comment {padding:4px;border:1px dashed #000000;background-color:#ffffdd}
  .error {color:red;}
  hr {border-width:0px;height:2px;background:black;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" rules="cols">

Now when I copy the whole html from the original source and create an html file locally I get to see the coloured diffs beautifully.

What could be wrong here?

I just started working with HTML mail formatting a couple days ago, so I'm no expert. I've found that it is not easy to support all the different mail clients out there. The number one thing you need to do is use inline styles, as <style> blocks don't necessarily work in all clients. Also, do not attempt to do regular CSS layout, you must use tables for layout. This means lots of repeated code, messy tables, and such. For instance:

  <div style="width:590px; margin-top:10px;margin-right:auto;margin-bottom:5px;margin-left:auto; padding: 20px 20px 20px 20px; background-color:#89b556;background-image: url(http://groupon.s3.amazonaws.com/email-images/shared/bg-email-starburst.jpg);background-repeat: no-repeat;background-position: center top; border-width:5px; border-style: solid; border-color:#deedcc;-moz-border-radius:10px;-webkit-border-radius:10px; ">
    <table width="100%" style="background-color:#fff; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; -webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px; *margin-top: -5px" cellspacing="0" cellpadding="0">

I read somewhere that some clients won't accept the <style> block in the <head>, but will in the <body>, so give that a try. Maybe gmail would support that.

Take a look at these free email templates for some ideas. Another thing I do is find a nicely formatted email that was sent to me and view its source. For instance, I used an email sent by Groupon.com, viewed the source, and took ideas from it. Unfortunately, I later found that it doesn't look right in some clients, such as Evolution. But it could be a starting point for you.

Here's another SO question that has some helpful answers.

For completeness sake (and my own future reference), I'm including the awesome link* provided by @Cherian above. I had not seen that link before, but it contains a wealth of information! Great find...

**link has since died at original location. It is accessible at: http://web.archive.org/web/20090116092215/http://xavierfrenette.com/articles/css-support-in-webmail/*

Tauren has given a great answer.

I've just found out that the new gmail interface (introduced in 2011) strips the background-color attribute from inline styles. I've managed to work around this by using the bgcolor attribute on a tr element.