I recently created an Email Template for one of our clients, but I am facing an issue. The color in the email shows up fine when I preview it in the system. However, once the email is received, the format remains intact but the colors disappear, turning the email into a black and white photo.
Here is the CSS Code I used:
<p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;"> <img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
<style><!--
table {
font-family: cambria;
}
td.bg1{
background-color:#E2E2E3;
color:#00629F;
}
td.bg2{
color:black;
}
--></style>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p>Click here to view Incident: ${URI_REF}</p>
</td>
</tr>
<tr>
<td class="bg1" colspan="5">Short Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${short_description}</td>
</tr>
<tr>
<td class="bg1" colspan="5">Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${description}</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
<p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span> </span></span></p>When I previewed the email in the system, this was the output: System Preview Email
However, when the email is received in Outlook, it looks like this: Outlook Email