Welcome to WebmasterWorld Guest from 18.104.22.168 , register , free tools , login , search , pro membership , help , library , announcements , recent posts , open posts Become a Pro Member
CSS In Emails spikernum1
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> </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> </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> </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> </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]
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.
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.
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] spikernum1
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.
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).
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.