title: cfmail is not formatting css
body: <p>Firstly apologies with my limited knowledge, I am just starting out in CF.</p>
  
  <p>So I am trying to send out an html email with cfmail when a form query is satisfied.</p>
  
  <p>The problem I am having is that the css I am embedding within the email head is either throwing up errors or just not formatting at all. Please could someone look at my code and tell me where I am going wrong. </p>
  
  <p>Incidentally when I take out the # tags in the css it seems to work but the email sends with no formatting!!!</p>
  
  <p></p>
  
  <pre><code>    &lt;cfmail to="customer email" from="xxxxxxx@gmail.com" subject="Your order at has been shipped" type="html"&gt;
          &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd"&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Title&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
      color: #000000;
      font-family: Arial, Helvetica, sans-serif;
  }
  body, td, th, input, textarea, select, a {
      font-size: 12px;
  }
  p {
      margin-top: 0px;
      margin-bottom: 20px;
  }
  a, a:visited, a b {
      color: #378DC1;
      text-decoration: underline;
      cursor: pointer;
  }
  a:hover {
      text-decoration: none;
  }
  a img {
      border: none;
  }
  #container {
      width: 680px;
  }
  #logo {
      margin-bottom: 20px;
  }
  table.list {
      border-collapse: collapse;
      width: 100%;
      border-top: 1px solid #DDDDDD;
      border-left: 1px solid #DDDDDD;
      margin-bottom: 20px;
  }
  table.list td {
      border-right: 1px solid #DDDDDD;
      border-bottom: 1px solid #DDDDDD;
  }
  table.list thead td {
      background-color: #EFEFEF;
      padding: 0px 5px;
  }
  table.list thead td a, .list thead td {
      text-decoration: none;
      color: #222222;
      font-weight: bold;
  }
  table.list tbody td a {
      text-decoration: underline;
  }
  table.list tbody td {
      vertical-align: top;
      padding: 0px 5px;
  }
  table.list .left {
      text-align: left;
      padding: 7px;
  }
  table.list .right {
      text-align: right;
      padding: 7px;
  }
  table.list .center {
      text-align: center;
      padding: 7px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
    &lt;p&gt;Your Order has been Shipped&lt;/p&gt;
    &lt;table class="list"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;td class="left" colspan="2"&gt;text_order_detail;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="left"&gt;&lt;b&gt;text_order_id&lt;/b&gt;&lt;br /&gt;
            &lt;b&gt;text_date_added&lt;/b&gt;&lt;br /&gt;
            &lt;b&gt;text_payment_method&lt;/b&gt;&lt;br /&gt;
            &lt;b&gt;text_shipping_method&lt;/b&gt;
            &lt;/td&gt;
          &lt;td class="left"&gt;&lt;b&gt;text_email&lt;/b&gt;&lt;br /&gt;
            &lt;b&gt;text_telephone&lt;/b&gt;&lt;br /&gt;
            &lt;b&gt;text_ip&lt;br /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
      &lt;table class="list"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;td class="left"&gt;text_instruction&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="left"&gt;comment&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;table class="list"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;td class="left"&gt;text_payment_address&lt;/td&gt;
          &lt;td class="left"&gt;text_shipping_address&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="left"&gt;payment_address&lt;/td&gt;
          &lt;td class="left"&gt;shipping_address&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;table class="list"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;td class="left"&gt;text_product&lt;/td&gt;
          &lt;td class="left"&gt;text_model&lt;/td&gt;
          &lt;td class="right"&gt;text_quantity&lt;/td&gt;
          &lt;td class="right"&gt;text_price&lt;/td&gt;
          &lt;td class="right"&gt;text_total&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="left"&gt;product
            &lt;br /&gt;
            &lt;small&gt;option&lt;/small&gt;
   &lt;/td&gt;
          &lt;td class="left"&gt;product['model']&lt;/td&gt;
          &lt;td class="right"&gt;product['quantity']&lt;/td&gt;
          &lt;td class="right"&gt;product['price']&lt;/td&gt;
          &lt;td class="right"&gt;product['total']&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;td colspan="4" class="right"&gt;&lt;b&gt;total['title']&lt;/b&gt;&lt;/td&gt;
          &lt;td class="right"&gt;total['text']&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
    &lt;p&gt;text_footer&lt;/p&gt;
    &lt;p&gt;text_powered&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
      &lt;/cfmail&gt;
          &lt;/cfif&gt;
  </code></pre>