Welcome to WebmasterWorld Guest from 54.146.211.105

Forum Moderators: not2easy

Message Too Old, No Replies

CSS In Emails

     
3:36 am on Sep 8, 2007 (gmt 0)

New User

5+ Year Member

joined:Oct 19, 2006
posts: 15
votes: 0


I am trying to add a template to all my website e-mail sending out, and am running into a problem with some e-mail clients.

I basically have 8 images that make a container around the content of each e-mail being sent out.

The current code (that works on webmail clients, but only displays images on the 4 corners in Outlook) looks like this:


<html><head></head>
<body bgColor=#ffffff><!-- Begin LCC Header -->
<table cellSpacing=0 cellPadding=0 width="100%">
<tbody>
<tr>
<td width=50 height=45><img src="http://preview.example.net/Admin/Uploads/Images/email_tl.gif"></td>
<td style="BACKGROUND-IMAGE: url(http://preview.example.net/Admin/Uploads/Images/email_t.gif)" background=http://preview.example.net/Admin/Uploads/Images/email_t.gif>&nbsp; </td>
<td width=50 height=45><img src="http://preview.example.net/Admin/Uploads/Images/email_tr.gif"></td></tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://preview.example.net/Admin/Uploads/Images/email_l.gif)" background=http://preview.example.net/Admin/Uploads/Images/email_l.gif>&nbsp; </td>
<td vAlign=top bgColor=#e6e6e6>
<center><img src="http://preview.example.net/Admin/Uploads/Images/email_logo.gif"></center><br><!-- End of header --->[#EmailContent#] <!-- Being LCC Footer --></td>
<td style="BACKGROUND-IMAGE: url(http://preview.example.net/Admin/Uploads/Images/email_r.gif)" background=http://preview.example.net/Admin/Uploads/Images/email_r.gif>&nbsp; </td>
<tr>
<td width=50 height=45><img src="http://preview.example.net/Admin/Uploads/Images/email_bl.gif"></td>
<td style="BACKGROUND-IMAGE: url(http://preview.example.net/Admin/Uploads/Images/email_b.gif)" background=http://preview.example.net/Admin/Uploads/Images/email_b.gif>&nbsp; </td>
<td width=50 height=45><img src="http://preview.example.net/Admin/Uploads/Images/email_br.gif"></td></tr></tr></tbody></table><!-- End of Footer --></body></html>

My problem is, the top left right and bottom filler images aren't displaying in Outlook, but they display fine in webmail clients. The img tags work perfectly on both clients.

Things I have tried:
- Tried adding the backgrounds in <head><style> and <body><style>
- Tried adding spaces before the CSS lines (i heard periods "." can act as STOP! to mail clients
- Tried using #stylename rather than .stylename and using IDs.
- Tried expanding filler images to 100%, but the 100% height doesn't work.

Anyone have a solution for this? Google was no help at all.

[edited by: encyclo at 11:37 am (utc) on Sep. 8, 2007]
[edit reason] switched to example.net [/edit]

11:32 pm on Sept 9, 2007 (gmt 0)

Junior Member

5+ Year Member

joined:June 20, 2007
posts: 42
votes: 0


You've solved the problem without knowing it.

You declared a width and height for your table cells on the corners which is why they work, but you neglected to do so on the flat sides.

Define a height for the top and bottom sides and a width for the left and right sides.

1:12 am on Sept 10, 2007 (gmt 0)

New User

5+ Year Member

joined:Oct 19, 2006
posts:15
votes: 0


The images that are on the corners should automatically create space, am I right?

So declaring the width and height in those columns is sort of redundant.

My problem really is... Outlook seems to be blocking background images totally... but webmail clients do not block this. I need a work around for it.

1:44 am on Sept 10, 2007 (gmt 0)

Junior Member

5+ Year Member

joined:June 20, 2007
posts: 42
votes: 0


Have you tested those cells with a background color or filler text to make sure they're rendering properly?

The intranet website I built at the company I work for sends notification emails that use tables styled with CSS.

Outlook seems to render empty cells without any height or width even if they are adjacent to, or in the same row or column with another cell that does have content.

In a web browser, a row or column will render at the width of the longest or tallest cell in that row or column. Outlook however seems to behave differently on this matter.

[edited by: SixTimesEight at 1:45 am (utc) on Sep. 10, 2007]

6:39 am on Sept 10, 2007 (gmt 0)

New User

5+ Year Member

joined:Oct 19, 2006
posts:15
votes: 0


I'm not sure you are correct.

If I add a bgColor to the cell, it fills in properly (doesn't need a width/height property to fill in correctly)... however, to keep with the style of the e-mail template, I have to use a background image.

12:15 pm on Sept 10, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


I don't have much hands-on experience with HTML in Outlook but I don't think Outlook/Word (2007) even support background images on table cells. In fact the only place where a background image might be supported is with the background attribute on the BODY element (as used in some Stationery).

Google for: supported html in outlook

Office Developer Center:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2) [msdn2.microsoft.com]

By the looks, on a <td>, neither the 'background' attribute or the 'background-image' CSS style are supported. The 'background' CSS style is supported, but only in terms of setting a colour.

I believe there is also a difference, in terms of rendering, when you view the email in the preview pane to when you open the email in a new window.