cfmail is not formatting css

Question

Firstly apologies with my limited knowledge, I am just starting out in CF.

So I am trying to send out an html email with cfmail when a form query is satisfied.

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.

Incidentally when I take out the # tags in the css it seems to work but the email sends with no formatting!!!

    <cfmail to="customer email" from="xxxxxxx@gmail.com" subject="Your order at has been shipped" type="html">
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div id="container">
  <p>Your Order has been Shipped</p>
  <table class="list">
    <thead>
      <tr>
        <td class="left" colspan="2">text_order_detail;</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left"><b>text_order_id</b><br />
          <b>text_date_added</b><br />
          <b>text_payment_method</b><br />
          <b>text_shipping_method</b>
          </td>
        <td class="left"><b>text_email</b><br />
          <b>text_telephone</b><br />
          <b>text_ip<br /></td>
      </tr>
    </tbody>
  </table>
    <table class="list">
    <thead>
      <tr>
        <td class="left">text_instruction</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">comment</td>
      </tr>
    </tbody>
  </table>
  <table class="list">
    <thead>
      <tr>
        <td class="left">text_payment_address</td>
        <td class="left">text_shipping_address</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">payment_address</td>
        <td class="left">shipping_address</td>
      </tr>
    </tbody>
  </table>
  <table class="list">
    <thead>
      <tr>
        <td class="left">text_product</td>
        <td class="left">text_model</td>
        <td class="right">text_quantity</td>
        <td class="right">text_price</td>
        <td class="right">text_total</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">product
          <br />
          <small>option</small>
 </td>
        <td class="left">product['model']</td>
        <td class="right">product['quantity']</td>
        <td class="right">product['price']</td>
        <td class="right">product['total']</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4" class="right"><b>total['title']</b></td>
        <td class="right">total['text']</td>
      </tr>
    </tfoot>
  </table>
  <p>text_footer</p>
  <p>text_powered</p>
</div>
</body>
</html>
    </cfmail>
        </cfif>

In which mailclients are you having these issue? All? MS Outlook, Mozilla Thunderbird, GoogleMail, ...? — Seybsen, Aug 24 '12 at 12:03
@Seybsen: I expect it's not a mail client thing at all. Raw pound signs are variable markers in ColdFusion, hence the need to escape them (by doubling them) when you actually want one to output. Otherwise you'll get errors because a variable can't be found. — ale, Aug 24 '12 at 13:44

score 4 · Accepted Answer · answered Aug 24 '12 at 11:29

4

You should stick to inline styles for HTML emails rather than having your styles presented the way you are doing.

E.G.

<td style="padding:10px;"></td>

answered Aug 24 '12 at 11:29

Billy Moat

20,792
7
45
37

I have converted to inline but still the same problems :-( – matthew Aug 24 '12 at 11:34

Matt Busche · Answer 2 · 2012-08-24T12:14:24.477

4

Two issues the first is you need to use ## in your CSS instead of #, otherwise ColdFusion tries to process those as variables. The second is you have an erroneous </cfif> at the bottom of your page, but that was probably just from when you copy and pasted your code.

I tested the code with ## instead of # and the email sent correctly on CF 9.0.1

edited Aug 24 '12 at 12:14

answered Aug 24 '12 at 12:03

Matt Busche

14,216
5
36
61

The lack of using ## should not be an issue here as the # are not within a CFOUTPUT so ColdFusion will NOT try to process them. Also, if this were the issue, ColdFusion would throw an error or, at the very least, not send the email. – Scott Stroz Aug 24 '12 at 12:10
1

Like the OP said, it does throw an error. `cfmail` functions as a `cfoutput`, you don't need to use a `cfoutput` tag inside `cfmail` – Matt Busche Aug 24 '12 at 12:13
2

Wow - I really need to not read SO right after waking. By bad. Carry on folks...nothing to see here..... – Scott Stroz Aug 24 '12 at 12:15

cfmail is not formatting css

2 Answers2