HTML and CSS in Outlook 2007

**nlamont** · Feb 4, 2013 09:18

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.

Code:

<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"!)

**Stomme poes** · Feb 4, 2013 11:24

First tip: http://www.campaignmonitor.com/resources/
these folks test their templates in a gazillion email clients, so they know most of the bugs

Second tip: do you get your borders back if on the table you add border-collapse: collapse; ?

Originally Posted by nlamont

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.

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.

**nlamont** · Feb 5, 2013 04:23

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.

**nlamont** · Feb 5, 2013 04:58

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.

**ralph.m** · Feb 5, 2013 06:18

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:

http://www.campaignmonitor.com/blog/...ages-in-email/
also read the followup:
http://www.campaignmonitor.com/blog/...ges-revisited/

Here's a tool for converting the image to code:

http://webcodertools.com/imagetobase64converter

**Stevie D** · Feb 5, 2013 06:55

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.

**nlamont** · Feb 12, 2013 09:06

Thanks Steve

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' :-)

**nlamont** · Feb 12, 2013 09:21

This is getting to be a joke! All I want now is to have a heading <h1> centred in a table cell!

I've added and added trying to get it and I wonder if something I'm doing is cancelling something else out.

td.banner {
text-align:center;
}

h1 {
margin:auto;
}

then in my page, <td class="banner" align="center"><h1>my heading</h1></td>

But still in Outlook 2007 it's over on the left! It's fine in Outlook 2003 and other mail readers.

What else can I do?

**Stevie D** · Feb 12, 2013 12:53

Originally Posted by nlamont

But still in Outlook 2007 it's over on the left! It's fine in Outlook 2003 and other mail readers.

What else can I do?

**Stomme poes** · Feb 12, 2013 13:11

td.banner {
text-align:center;
}

h1 {
margin:auto;
}

then in my page, <td class="banner" align="center"><h1>my heading</h1></td>

does
h1 {
text-align: center;
}
do anything?

**ralph.m** · Feb 12, 2013 16:32

Also try:

Code:

<td style="text-align:center"><h1 style="text-align: center;">my heading</h1></td>

Inline styles are the way to go in email, unfortunately.

**nlamont** · Feb 15, 2013 07:25

Unbelievable but even this doesn't centre it in OL2007!

<td style="text-align:center;"><center><h1>my heading</h1></center></td>

**Stomme poes** · Feb 15, 2013 07:26

Hahaha, the <center> cannot hold...

**Stevie D** · Feb 15, 2013 08:07

Originally Posted by Stomme poes

Hahaha, the <center> cannot hold...

...what?

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>.

**nlamont** · Feb 15, 2013 08:25

Finally got it centred with

Code:

<tr><td class="banner" align="center" style="text-align:center;border-bottom:3px solid #00864F;"><center><h1 style="font-weight:normal; text-align:center;">DISCOVER LEARNING</h1></center></td></tr>

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 2003notif 2007.jpg notif 2003.jpg. 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:

Code:

table {
	width: 400px;
	border: 2px solid #cfe8de;
}

Code:

<table align="center"  width="400" border="2" cellpadding="10" cellspacing="0" bordercolor="#cfe8de"  style="border: 2px solid #cfe8de;width:400px;border-collapse:collapse;">

and even wrapping the table in a div:

Code:

<div id="wrapper" style="border: 2px solid #cfe8de; width:404px;">

Anything else I can try?

**Stomme poes** · Feb 15, 2013 10:40

@StevieD no, that was a reference to Zalgo.

http://stackoverflow.com/questions/1...732454#1732454 The <center> cannot hold it is too late...

User Tag List

Thread: HTML and CSS in Outlook 2007

Thread Tools

Display

HTML and CSS in Outlook 2007

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions