Question

I am very new to CSS and i am trying to format an email using the cfmail tag. Below is the code:

<cfmail from="ABC@xyz.com"
            to="#InvestigatorEmail#" 
            subject="Reminder #flagReminder#:: Incident Report: #report_number#"> 

            <style>
    BODY {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: ##fff
    }
    BODY {
        FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    P {
        FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    LI {
        FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }

    A {
        COLOR: ##0c479d; TEXT-DECORATION: none
    }
    A:hover {
        BACKGROUND-COLOR: ##d3deed
    }

    table{
            width:100%;
            border-bottom:1px solid ##eee;
            clear:both;
            color:##000;
            margin-bottom:10px;
            FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
        }
    td {
            padding:3px 4px;
            vertical-align:top;
            border-right:1px solid ##ddd;
            color:##000;
            font-weight:bold;
            margin:0;
        }
    tr.odd {
            background-color:##ffffcb
        }
    td.row-header {
            width:100px;
            font-weight:normal;
        }

    </style>        

The below Incident Report has been assigned to you on     #DateFormat(InvestigationAssigned_tms,"dd-mmm-yyyy")#</br></br>

                <table width="720">
                <tr>
                    <td>Incident Report #</td>
                    <td>Person Involved</td>
                    <td>Incident Description</td>
                    <td>Incident Location</td>
                    <td>Status</th>
                    <td>Investigation Assigned Date</td>
                </tr>
                <tr>
                    <td>#report_number#</td>
                    <td>#NameOfPersonInvolved#</td>
                    <td>#IncidentDescription#</td>
                    <td>#IncidentLocationCity#</td>
                    <td>#reportStatus#</td>
                    <td>#InvestigationAssigned_tms#</td>
                </tr>
                </table>
</cfmail>

All the data is coming from a query which i am looping through to send emails to different people. I need the data concerning one person to be displayed in a tabular format. I'm not sure what i am doing wrong here since this is the first time i am trying to use HTML/CSS in an email.

Was it helpful?

Solution

You need to use the type="html" attribute on the CFMAIL tag.

You might also want to consider wrapping your HTML content in the appropriate HTML and Body tags, as you would normally expect from a HTML template.

<cfmail from="ABC@xyz.com"
            to="#InvestigatorEmail#" 
            subject="Reminder #flagReminder#:: Incident Report: #report_number#"
type="html"> 
<html>
<body>
            <style>
    BODY {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: ##fff
    }
    BODY {
        FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    P {
        FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    LI {
        FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }

    A {
        COLOR: ##0c479d; TEXT-DECORATION: none
    }
    A:hover {
        BACKGROUND-COLOR: ##d3deed
    }

    table{
            width:100%;
            border-bottom:1px solid ##eee;
            clear:both;
            color:##000;
            margin-bottom:10px;
            FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
        }
    td {
            padding:3px 4px;
            vertical-align:top;
            border-right:1px solid ##ddd;
            color:##000;
            font-weight:bold;
            margin:0;
        }
    tr.odd {
            background-color:##ffffcb
        }
    td.row-header {
            width:100px;
            font-weight:normal;
        }

    </style>        

The below Incident Report has been assigned to you on     #DateFormat(InvestigationAssigned_tms,"dd-mmm-yyyy")#</br></br>

                <table width="720">
                <tr>
                    <td>Incident Report #</td>
                    <td>Person Involved</td>
                    <td>Incident Description</td>
                    <td>Incident Location</td>
                    <td>Status</th>
                    <td>Investigation Assigned Date</td>
                </tr>
                <tr>
                    <td>#report_number#</td>
                    <td>#NameOfPersonInvolved#</td>
                    <td>#IncidentDescription#</td>
                    <td>#IncidentLocationCity#</td>
                    <td>#reportStatus#</td>
                    <td>#InvestigationAssigned_tms#</td>
                </tr>
                </table>
</body>

Hope this works for you?

Also note, that your issues may be due to the complexities of using CSS in emails...which is always a pain. CSS support in emails is limited and very basic. This isn't a ColdFusion / CFML issue, it's just the way HTML emails are today.

I would recommend moving your CSS to be 'inline' on the HTML tags themselves, as email clients often strip out the STYLE tags.

Mikey.

OTHER TIPS

It's really simple, you just need to add a type to your cfmail tag. It would look something like

<cfmail to="recipient" from="sender" subject="subject" type="html"></cfmail>

Alternatively, you can specify the HTML part using the cfmailpart tag. This also allows you to specify a separate plaintext version for anyone who might be using a mail browser that won't render HTML.

e.g.

<cfmail>
      <cfmailpart type="html">... your table here ...</cfmailpart>
      <cfmailpart type="text">A plaintext version for everyone else</cfmailpart>
</cfmail>

NB: don't specify both the type="html" on the <cfmail> tag AND the <cfmailpart> tags together. Either do one or the other (it's simpler to just do the type="html" on the <cfmail> but I prefer to do both plaintext and HTML).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top