cfmail is not formatting css

StackOverflow https://stackoverflow.com/questions/12108495

سؤال

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>
هل كانت مفيدة؟

المحلول

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>

نصائح أخرى

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top