I'd appreciate some advice about trying to implement very simple CSS in an email generated from a system.
The system is a corporate learning management system. It generates a large number of notification emails. The instructions are, in the notification setup section, to put the HTML for an email into what it calls a text block. The text block is then sent by the system as an inline attachment. The corporate email system is MS Outlook 2007. I don't have to cater for multiple email clients. I've been trying to do two things with very mixed success:
- style the email with very simple CSS, nothing fancy and no positioning
- include a banner image
In terms of CSS, I've read a bit and know I have to use tables for layout, not CSS. I've been able to successfully set the font and font size, and to give one table cell a background colour. These work in any email client. What I can't do is get a border on the table to show in Outlook 2007. I've tried inline CSS and putting it in the <table> tag and it just won't display a border in Outlook 2007. (Other email clients show it.)
As for the banner image, the system providers said I should just put the URL of the image in the HTML as normal. The email arrives with an empty box where the image should be. No alt text, no 'Right click to display images'. Just a box. The email also includes an iCal appointment. Strangely if you accept the appointment it appears in your calendar WITH the banner image.
The system also enables you attach the banner image and reference it in the HTML - just by its name, not a full URL. If I do that the display depends on how you have Outlook set up. If you have a Reading Pane shown. The email appears in the Reading Pane with no image. If you double click it so it opens in its own window, the banner image is there inline where it should be AND as an attachment. However if you don't have a Reading Pane and just double click the email title from the Inbox it opens in a new window WITHOUT the banner :nono:
I've put a sample of the HTML here. You'll see that I've duplicated a lot of CSS trying to get the border to display.
<head> <title>Learning notification</title></head>
font-family: Arial, Helvetica, Sans-serif;
border: 1px solid #cfe8de;
border: 1px solid #cfe8de;
<table align="center" width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#cfe8de" style="border: 1px solid #cfe8de;width:400px">
<tr><td><img src="bannerImage.jpg" width="200" height="60" alt = " Alt text goes here" /></td></tr>
<tr><td class="bodyTextHolder" style="border: 1px solid #cfe8de;width:400px">
<!-- ******************* Body Text Start ********************* -->
TEXT HERE VARIES ACCORDING TO THE INVITATION
<!-- ******************* Body Text End ********************* -->
<p class="footerSm"><strong>DO NOT REPLY TO THIS AUTOMATICALLY GENERATED EMAIL.</strong></p>
Any tips would be very welcome! (Other than "don't use Outlook 2007"!)