Forum Moderators: not2easy
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>
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 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.
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.
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]
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.
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.
