Hi,
I was using this code below for a dropdown shadow effect around a table:


#shadow {
filter: progid: DXImageTransform.Microsoft.dropshadow(OffX='-3', OffY='3', Color='#002D83', Positive='true');
background-color: #FFFFFF;
BORDER-RIGHT: #002D83 1px solid;
BORDER-TOP: 0;
BORDER-LEFT: #002D83 1px solid;
BORDER-BOTTOM: #002D83 1px solid;
}

The problem is, I can't see my shadow in firefox, just IE.
Anyone?

many thanks!

The filter is IE only code so it won't work with anything else. I think the way you have the borders set is a little off. I'm not entirely sure, but I think the color needs to come last so:

border-right: 1px solid #002d82;

Try moving the color to the end and see if that works.

No, it does not...

Is this online somewhere that you could post a link? if not could you post all the code for the page? I'll be happy to take a look and see if I can figure out why it's not working.

CSS:



#shadow {
filterrogidXImageTransform.Microsoft.dropshado w(OffX='-3', OffY='3', Color='#002D83', Positive='true');
background-color: #FFFFFF;
BORDER-RIGHT: #002D83 1px solid;
BORDER-TOP: 0;
BORDER-LEFT: #002D83 1px solid;
BORDER-BOTTOM: #002D83 1px solid;
}







<-- TABLE/HTML-->

<div id="offerpanel4" class="panels" onMouseOver="showIt('navpanel');showIt('offerpanel 4');" onMouseOut="hideIt('offerpanel4');hideIt('navpanel ');">

<form name=form>

<table ID="shadow" width="300" border="0" cellspacing="0" cellpadding="0" background="images/gradstrip.gif" height="245">
<tr>
<td><table width="300" border="0" cellpadding="0" cellspacing="0" background="images/gradstrip.gif">
<tr>
<td colspan="2"><img src="images/spacer.gif" height="1" width="302"/></td></tr><tr>
<td width="150" class="text" align="right">
<select size="1" name=site onchange="formHandler(this.form)">
<option select>Ad Categories</option>
<option value="http://www.yahoo.com">blablabla bla bla </option>
<option value="bla">bla</option>
<option value="bla">bla</option>
</select></td>

<td width="150" class="text" align="center">
<select size="1" name="Browse Brands">
<option select>Browse Brands</option>
<option value="bla">blabla bla bla bla</option>
<option value="bla">bla</option>
<option value="bla">bla</option>
</select></td>

</tr>
</table></td>
</tr>
<tr>
<td width="290"><div align="center"><a href="https://www.xxxx.com/xxxx/"><img src="images/sav_ad.gif" width="205" height="201" alt="savon ad" border="0" /></a></div></td>
</tr>
</table>
</form>
</div>

I found this that helped:
http://theshapeofdays.com/2005/11/my_contribution.html

I am still looking for a simpler way though, let me know if anyone found anything.

Super thanks!

I'm not sure the exact effect you're going for. I kind of do shadows the way the article talks about.

One thing I did though was just increas the width of your borders. Making them 2px or larger starts to show the shadow more. I think that might be all you need.

I also find a shadow looks more real to me if I only add the extra border on two sides, maybe right and bottom. I think it looks more natural that way, but I guess it depends on where the imaginary light source would be.

Try just making the borders wider though and see if that gives you the effect your looking for. 2px or 3px should be enough.

Vangogh...

I want the shadow a little lighter than the border. So they are two different colors. And yep, just on the left and bottom borders - the light comes from the top right.

Many thanks for you patience and attention, by the way!

No problem. Glad to help. I think if you want to have the shadow be a different color than the table border the best way might be the way the article alludes to.

What I do is set up a div and give it a width and height that are the same as the element you want to give the shadow to in this case your table. Then I'd use css positioning to place it behind the table but a few pixels off down to the left. Then just give it a background color of your choice.

The code might be:

div#shadow {position:absolute; z-index:-1; top:some px; left:some px; width:some px; height:some px; background:#hex color}

Something like that should work if you're table has a fixed height and width.

Another thought is waht if you gave the cells of the table a border and then also the table itself a border. So you might have all the td's on the left of the table get a class of left and then

td.left {border:1px solid #002d8s}

similiarly for the bottom cells. The you could add a border on the left and bottom of the table that's your shadow color. Should work as long as you have 0 cellspacig which you do.

I'll keep coming back and checking out how it's going and let you know if I have any other ideas.