Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Andrew Milne
Andrew Milne
10,071 Points

HTML Email Help!

Ive created an HTML email which needed to have a drop shadow effect on the email itself. In order to do that I created a td to the left with an image inside which I want to stretch to be 100% of the height but the height only seems to be stretching in around 50% of email clients. According to litmus, this isnt working in any of the outlook email clients. Any thoughts about how I can get around this would be greatly appreciated!

Here is an example of the code I am trying to make work. So effectively the content in the middle could vary to make the email long or short so the first and last td need to stretch the image to make it work.

<td width="20" height="100%" bgcolor="#ffffff" style="font-size:0;height:100%;"><img src="left-drop-shadow.gif" alt="" border="0" height="100%" width="20" style="display:block;height:100%;"></td>
<td> CONTENT OF EMAIL IS IN HERE</td>
<td width="20" height="100%" bgcolor="#ffffff" style="font-size:0;height:100%;"><img src="left-drop-shadow.gif" alt="" border="0" height="100%" width="20" style="display:block;height:100%;"></td>

2 Answers

Andrew Milne
Andrew Milne
10,071 Points
Andrew Milne
Andrew Milne
10,071 Points

I managed to sort this issue - well, get around it anyway!

Rather than have one td element with an image inside it to get the drop shadow effect, I created 12 td's instead. Each one px thick and with a slightly darker background color. This gives off the exact same effect and is completely cross email client compatible.

Lush Sleutsky
Lush Sleutsky
14,044 Points

That is a great idea!! I often do HTML email projects, and always try to read up on little tricks and hacks about em, and this one is great. Nicely done!!

dnogmdehbp
PLUS
dnogmdehbp
Courses Plus Student 726 Points
dnogmdehbp
dnogmdehbp
Courses Plus Student 726 Points

I don't know for sure, but can't you use 

     <div class="container">
         <!-- your table go's here-->
    </div>

and then in your css

.container{
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);

}
Lush Sleutsky
Lush Sleutsky
14,044 Points

Most e-mail clients barely support CSS, and they certainly don't support box-shadow, so that would not work out too well. HTML e-mail is a crazy animal, and the more minimum inline styles you use, the better...

Andrew Milne
Andrew Milne
10,071 Points

Lush Sleutsky is right. Thats what makes HTML emails so difficult :(