Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 882
  • Last Modified:

Shadow behind image in Firefox/Safari/Chrome

I am using the following line in my css to put a nice shadow behind an image:

filter:progid:DXImageTransform.Microsoft.Shadow(color=#848A84, Direction=135, Strength=4);

It works great in IE (I am using version 7).  You can see it at http://www.celinevictoria.com/newsite/index.php?act=viewCat&catId=7 .

But the client uses Firefox, and sometimes Google Chrome.  We would like it to also work in these other browsers, as well as Safari, if it is at all possible.

I realise this is a Microsoft feature, and so might only be meant to work in IE, but is there a similar function I can use for other browsers?  Or a different one that would give a similar effect but also work in IE?

I am programming in php.

2 Solutions
As far as I know, there is still no simple solution for this.  Easiest is probably to create a transparent  background image (png format will probably work best), and align it to the bottom right of your boxes, like so:

.shadow {
 width: 400px; height:400px;
 background: transparent url(../images/shadow.png) bottom right no-repeat;

Any simple workarounds will require you to specify width and height of the div, in order to work, anyway.  The alternative is, of course, to start create a table-like layout with your html - a situation I avoid, as it generally complicates things beyond reason, especially when you're required to go back and make edits to your code a  year or two later and have to sort through the mess.

If you use this solution, you will want some padding.  I generally apply padding only to the innermost elements of my html, as anything applied on the outside, trying to create spacing for the content inside, generally creates problems between IE and Firefox.  So for example:

.shadow p { padding: 10px 30px 30px 10px;}

This goes top-right-bottom-left, so will add padding on the right and bottom.  If this is not working well, try margin instead of padding.

Best luck.  
You could probably place the image inside of a div and then add some padding, background colour and mess with position: absolute to make a faux image shadow instead. That is the only way I know to go about it and have it work across a multitude of browsers.

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now