cfmail is not formatting css
cfmail, coldfusion, css, email, html-email
Solution
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>
Problem
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> ```