[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

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

0
igloobob
Asked:
igloobob
  • 4
  • 2
1 Solution
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
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/
0
 
igloobobAuthor Commented:
I have found this :

css3PIE
http://css3pie.com/

 though it doesn't seem to be working for me! The examples on their site do but on my own it doesn't for some reason.

Happy to leave as is and be done with it!

0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Did you place the PIE.htc file in the correct place? Other than that it should work.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
igloobobAuthor Commented:
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.
0
 
igloobobAuthor Commented:
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!
0
 
igloobobAuthor Commented:
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!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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