Shadow behind image in Firefox/Safari/Chrome

Posted on 2010-01-09
Medium Priority
Last Modified: 2013-12-08
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.

Question by:geckogully
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Accepted Solution

trinzia earned 252 total points
ID: 26272420
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.  

Assisted Solution

dwaynecharrington earned 248 total points
ID: 26272727
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses
Course of the Month12 days, 10 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question