Reputation: 423
I created an inner shadow for a div as in the following css code:
.gil_Help_ContentArea {
width: 300px;
height: 200px;
margin: 5px 0 0 0;
padding: 0px;
background-color: #fff;
box-shadow: inset 0 0 10px #ccc;
-moz-box-shadow: inset 0 0 10px #ccc;
-webkit-box-shadow: inset 0 0 10px #ccc;
-khtml-box-shadow: inset 0 0 10px #ccc;
}
It is working fine with browsers other than IE, but I want the same effect in IE. If anybody is willing to help, it will be appreciated.
You can check the effect at http://jsfiddle.net/shabirgilkar/Mu9jL/.
Upvotes: 7
Views: 16771
Reputation: 139
At current (November 2011) it does not appear that anyone has developed a polyfill for IE8 or IE7 to do what you want. See, for instance, CSS3PIE (https://github.com/lojjic/PIE/issues/3) which has box-shadow support but does not support the inset flag.
Your best (only?) option is to create an image to use as the background for the element. This is, obviously, not a great solution.
(Also, to help you and others find other useful polyfills, here's a possibly useful link: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)
Upvotes: 0
Reputation: 46477
IE 8 and below don't support the box-shadow
CSS3 property, but it might be possible to get it to work. You should check these articles out...
I would recommend using images for IE 8 and below (use conditional stylesheets).
I came up with a crappy solution, but it works in IE 8, Chrome, Firefox, Safari, and Opera. Check out the fiddle...
http://jsfiddle.net/UnsungHero97/Mu9jL/3/
I hope this helps.
Hristo
Upvotes: 6
Reputation: 15159
Select box shadow
-webkit-box-shadow: inset 0px 0px 15px #313199;
-moz-box-shadow: inset 0px 0px 15px #313199;
box-shadow: inset 0px 0px 15px #313199;
What version of IE are you referring to? The different versions are vastly different.
Upvotes: 0