asked on

box shadow direction

Hello,

I am using the box shadow on somw divs on my page. Work prefect in Firefox, Safari etc but in IE they are all off set. I do not want any offset just and even drop shadow on all sides. I have this specified with the mox and webkit code but for the ms filter I am not sure what the direction should be.

As it is below in my code, there is an offset in IE.

Any ideas?

-moz-box-shadow: 0px 0px 5px #666;
	-webkit-box-shadow: 0px 0px 5px #666;
	box-shadow: 0px 0px 5px #666;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#666666')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#666666');

Open in new window

Sudaraka Wijesinghe

It appears there's no way to position the shadow/blur with filters in IE. You can have a workaround if you don't mind changing the HTML slightly.

My solution was inspired by this article.
The modification I'm suggesting is to the inner element to be explicitly positioned (with left/top or margin:auto if it has fixed size).

HTML

<div class="shadow1">
        <div class="content content-ie">
                Box-shadowed element
        </div>
</div>

Open in new window

CSS

.shadow1 {
        margin: 40px;
        background-color: rgb(102,102,102); /* Needed for IEs */

        -moz-box-shadow: 0 0 5px rgba(102,102,102,0.6);
        -webkit-box-shadow: 0 0 5px rgba(102,102,102,0.6);
        box-shadow: 0 0 5px rgba(102,102,102,0.6);

        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
        -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
        zoom: 1;
}
.shadow1 .content {
        position: relative; /* This protects the inner element from being blurred */
        padding: 100px;
        background-color: #DDD;
}

.content-ie {
    left: 2px;
    top: 2px;
}

Open in new window

You will need to do more work on the code to make sure the .content-ie part only comes into play when in IE (conditional comments?)

http://jsfiddle.net/a8Ykg/1/

ASKER CERTIFIED SOLUTION

igloobob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sudaraka Wijesinghe

Did you place the PIE.htc file in the correct place? Other than that it should work.

igloobob

ASKER

yep I did it all correctly and still no joy, to be honest I abandoned it as it is an old job I was just having a review of and client is happy with it anyway. I meant to try it on a different site at some point but haven't got around to it yet.

igloobob

ASKER

I got PIE working in the end, in adding it I didn't delete the old rules for the shadow so it was all duplicated and therefore not working.

PIE is the answer for me!

igloobob

ASKER

I got PIE working in the end, in adding it I didn't delete the old rules for the shadow so it was all duplicated and therefore not working.

PIE is the answer for me!