How do i add a drop shadow to this?

[David9799]

Drop shadow?

See where the purple meets the grey in this pic?

I want to add a drop shadow stright down where the two colors meet to make it look like the purple has a shadow on to the grey part.

Only way i know of to do to is to make the shadow in PhotoShop and then add a column to the table where the two colors meet and use the shadow image as the background image in that part of the table.

There has to be a better way?

Please help!

[Wickham]

You can do what you want using layers.
Put the image in a div and create another div with a border-right that overlays it.
Both divs need to be position: absolute to be superimposed and need to be in a position: relative div to set the position: absolute from its boundary rather than the page boundary.

<div class="StreamView" >
<!--edited code follows-->

<div style="position: relative;"> <!--alternative: put this style in div class="StreamView and delete </div> before Privacy-->

<div style="position: absolute; top: 0; left: 0; z-index: 1;">
<p class="Photo">

<a href="/photos/david97/240890085/"><img
src="http://static.flickr.com/81/240890085_d03c3f23eb_m.jpg"
width="240" height="113" /></a>
</p>
</div>

<div style="position: absolute; top: 0; left: 0; z-index: 5; width:
45px; height: 113px; border-right: 10px solid gray">&nbsp;</div>

</div>

<p class="Privacy">...

I haven't been able to test this properly because I didn't download your images or stylesheets but it works in IE6 by putting a gray line at the right of the purple. In Firefox the gray line is displaced upwards but there must be a cure for this.
The above means the purple part doesn't work as a link.
---------------
If you create a shadow image and then put that as a layer with a link it doesn't stop the purple bit acting as a link.

This works as a link and also stops Firefox displacing the shadow upwards but it is as complicated as your solution:-

<div class="StreamView" style="position: relative;">

<div style="position: absolute; top: 0; left: 0; z-index: 1;">
<p class="Photo">
<a href="/photos/david97/240890085/"><img
src="http://static.flickr.com/81/240890085_d03c3f23eb_m.jpg"
width="240" height="113" /></a>
</p>
</div>

<div style="position: absolute; top: 0; left: 45px; z-index: 5; ">
<p class="Photo">
<a href="/photos/david97/240890085/"><img
src="gray10x113.jpg" width="10" height="113" /></a>
</p></div>

<p class="Privacy">...