Question

I want a gradient shadow along the side of the content row. The gradient must expand in relation to the content.
What I’m doing right now is having 9 td’s with a right border next to my content. This works in Thunderbird, but not Outlook:

<td style="border: collapse; border-spacing: 0; border-right: 1px solid #cbcbcb;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c9c9c9;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c6c6c6;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c2c2c2;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #bdbdbd;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #b6b6b6;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #afafaf;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #a7a7a7;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #9e9e9e;"></td>

I get a nice gradient shadow in Thunderbird, but in Outlook I get the left-border as a white line. I have also tried to to make the td’s like: this:

<td style="width: 1; bgcolor: #cbcbcb"></td>

This works in outlook, but Thunderbird does not seems to render a td at all that has no content.

Last I tried to make a left and right border like this:

<td style="border: collapse; border-spacing: 0; border-right: 1px solid #cbcbcb; left-border: #c9c9c9;"></td>

This worked in Thunderbird but not in Outlook.

Can you please help me?

Answer 1

I solved it by using a transparent 1x1px gif like this:

<td rowspan="6" width="1" bgcolor="#9e9e9e"><img src="http://www.blabla.com/new_mail_template/spacer.gif"></td>

Thunderbird does not show empty cells so I had to put something into them