Drop Shadow Whole Email

Hi all, I've got a question about adding a drop shadow to an entire email.  I obviously want to stay away from using a background image to produce this effect, so I decided to wrap the whole email in a three column table as such:

left gradient / email content / right gradient

<table cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td height="1187"><img src="leftgradient.jpg" border="0" width="20" height="1187" /></td>
        <td height="1187">all email content in wrapped tables here</td>
                <td height="1187"><img src="rightgradient.jpg" border="0" width="20" height="1187" /></td>
     </tr>
</table>

My problem is even though I'm setting the height of the main content area, different clients seem to be handling the height differently and the gradient lengths aren't matching up exactly with the main area.  Any ideas how to fix this so that all three column heights will always match up, no matter what the client does with the content height?

Thanks.

BThies BThies, 5 years ago

Instead of using images, use 1px wide columns to recreate the shadow like this:

<table width="500" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="1" bgcolor="#cccccc"></td>
<td width="1" bgcolor="#999999"></td>
<td width="1" bgcolor="#666666"></td>
<td width="1" bgcolor="#333333"></td>
<td width="1" bgcolor="#000000"></td>
<td width="490">Put all content here.  Flexible height = Winning!</td>
<td width="1" bgcolor="#000000"></td>
<td width="1" bgcolor="#333333"></td>
<td width="1" bgcolor="#666666"></td>
<td width="1" bgcolor="#999999"></td>
<td width="1" bgcolor="#cccccc"></td>
</tr>
</table>

Brian Thies
Professional Email Developer
Thies Publishing
ncola, 5 years ago

Thanks Brian, your guru title is well earned!

My client is also asking about adding top and bottom drop shadow... would I have to use images for those?  It seems like this method wouldn't work when you have to use separate rows.

BThies BThies, 5 years ago

You could use a bunch of <tr><td height="1" bgcolor="#xxxxxx"></td></tr>, but the corners will be the issue.  I'd say if you have to use images anyway, you might as well make the entire header & footer images.


Brian Thies
Professional Email Developer
Thies Publishing
NickoLabs NickoLabs, 5 years ago

Hmm, nice workaround! (Geez, I haven't been here in like forever!)

The same principle also applies if you want to add a border that is stable between email client.

It kinda prevent Border CSS from not working, and let you choose the color of the borders nonetheless. I might have an example somewhere around....

Yup, here's an example for my "News" box...

<table width="219" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><img src="news_top.gif" width="219" height="72"></td>
                    </tr>
                    <tr>
                      <td valign="top"><table width="219" border="0" cellspacing="0" cellpadding="0">
                          <tr><td bgcolor="#ffffff" width="3"><img src="spacer.gif" width="3" height="1"></td>
                                  <td bgcolor="#7b7b7b" width="1"><img src="spacer.gif" width="1" height="1"></td>
                                  <td bgcolor="#f0f0f0" width="11"><img src="spacer.gif" width="11" height="1"></td>
                            <td width="169" valign="top" class="news" align="left">
<repeater>
                                <h4>
                                  <$title link='true' default='News Title'$>
                                </h4>
                                <$description default='<p>News Description - Lorem ipsum dolor sit amet...</p>'$>
                                <br>
                            </repeater></td>
                            
                                  <td bgcolor="#f0f0f0" width="14"><img src="spacer.gif" width="14" height="1"></td>
                                  <td bgcolor="#7b7b7b" width="1"><img src="spacer.gif" width="1" height="1"></td>
                                  <td bgcolor="#ffffff" width="20"><img src="spacer.gif" width="20" height="1"></td>
                          </tr>
                        </table></td>
                    </tr>
                    <tr>
                      <td><img src="news_bot.gif" width="219" height="29"></td>
                    </tr>
                </table>

I emulated the margin as well with spacers... and using images for top and bottom can actually let you use rounded borders too.


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn
Rich Simisker Rich Simisker, 5 years ago

To extend Brian's approach, you can fake an all-round drop shadow by using nested 100%-wide tables with cell-paddings of 1 pixel; each table having a different bgcolor that ultimately forms the shadow gradient.

The benefit of this approach is that cell-paddings are more robust and consistent across clients; they don't collapse like inline-styled padding or empty fixed-width cells can do.

If I remember rightly, only old versions of Lotus Notes have issues with tables nested beyond 8 deep; all modern clients handle them without problems.


Self-styled "Technical Boffin" at Plasticle E-mail Design.
ncola, 5 years ago

Rich, very cool solution - seems to work well in all the major clients that I tested.

Obviously the more tables I nest, the more natural the gradient will look.  Should I be wary of using too many?  Right now I have about 6 or 7, plus the main content of the email nests about 4 or 5 further in.  Will this be problematic?  I know you mentioned Lotus Notes doesn't like going beyond 8 - will any of the other clients get buggy with 12+?

Rich Simisker Rich Simisker, 5 years ago

I should have known it would be one of David's articles:

http://www.campaignmonitor.com/blog/post/2644/nested-tables-in-email-how-much-is-too-much/

The *sensible* answer to "how many?" is, of course, as few as you can get away with; don't forget that each gradation adds a pixel of bulk. I seem to recall using a nice round 10 in the past, as that allows for a strong frame effect if required, and leaves another confirmed 6 levels of depth for the content layout.

The *tempting* answer to "how many?" is, of course, 255 :D


Self-styled "Technical Boffin" at Plasticle E-mail Design.
cocktailking30 cocktailking30, 5 years ago

now thats cool..

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098