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
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.
<html>
<head> <title>Learning notification</title></head>
<body>
<style type="text/css">
<!--
p {
font-family: Arial, Helvetica, Sans-serif;
color: #000000;
margin-left:10px;
font-size: 16px;
}
.footerContent {
background-color:#cfe8de;
}
.footerSm {
font-size:14px;
}
table {
width: 400px;
border: 1px solid #cfe8de;
}
td.bodyTextHolder {
border: 1px solid #cfe8de;
}
-->
</style>
<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">
<br />
<!-- ******************* Body Text Start ********************* -->
TEXT HERE VARIES ACCORDING TO THE INVITATION
<!-- ******************* Body Text End ********************* -->
</td></tr>
<tr><td class="footerContent">
<p class="footerSm"><strong>DO NOT REPLY TO THIS AUTOMATICALLY GENERATED EMAIL.</strong></p>
</td></tr>
</table>
</body>
</html>
Any tips would be very welcome! (Other than “don’t use Outlook 2007”!)
Second tip: do you get your borders back if on the table you add border-collapse: collapse; ?
Is the mail client stripping images? Many do, since accepting and showing the image requires a request, which lets spammers know you’ve opened the mail and therefore your address is “live” and therefore juicy and good for resale to other spammers. So many clients don’t show images by default.
Thanks for replying. I didn’t know of that campaignmonitor site, so I’ll read that. I’ll try border-collapse this morning.As for the client stripping images, I’m not sure. We do regularly receive HTML emails with images in, or with the option to display images, or option to add the sender to a safe list. These notifications I’m doing offer none of those options. It would be OK if they did.
Thanks. I’ve just tried border-collapse (I added it to the CSS in the <table> tag) and it makes no difference. The table has width and background-colour on the specified cell, but still has no border, either in the REading Pane or when opened in its own window. As before it shows no image or warning text or alt text in the Reading Pane but shows the image correctly when opened.
I’m inclined now to drop the image completely as it gives a bad impression when the first thing the recipient sees is an empty box. My branding people will be unhappy but it looks like they’ll just have to be unhappy. I’ll add a header using text and background colour, since I know that works, and perhaps use a background colour for the main section too, as that will show the width of the table instead of a border. Our IT dept is notorious for implementing things in a non-standard way, so it doesn’t behave as described in that (excellent site) campaignmonitor. I suspect - although I can’t be sure - that it’s also affected by the fact our standard browser is still IE6. It just seems too much of a coincidence.
A way of stepping around the image issue in emails is to convert ehe image to code first and then embed it in the email. It’s still a bit flaky in some email clients, but works OK in Outlook 2007. Here’s an article about it:
I’m intrigued by the line img src="bannerImage.jpg" … where is the image stored? If you aren’t sending it as a multipart attachment, you’ll need to give the full URL of where the client can download the image from.
I was sending the image as another attachment in that version of the HTML. I’d tried giving an online URL and sending the image as an attachment, and setting the image as a background image on a table cell, as described by campaignmonitor.com. None of them gave me an image in the received email.
I’ve now reverted to using text for my heading, but even that is a mess. It doesn’t seem to recognise any known form of centering, or ‘text-transform’
According to our own dear reference, <center> is a block-level element, and the W3 says
The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to “center”
so it’s perfectly legitimate to have an <h1> inside a <center>.[/font]
Now if I could just get a border round table, and even, if the angels were watching and I’d been good, get the font-weight to ‘normal’!
Attached is how it looks in our corporate Outlook 2007, and how it looks on a private Outlook 2003. 2007 has bold heading, pushed up to top of table cell, no bottom dark green border on the heading cell and, most important, no border round the table.
I’ve tried every trick I know to get a border on it:
