Inner shadow for div in IE

Question

I created an inner shadow for the div, as in the following CSS:

.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 works fine with browsers other than IE, but I need the same effect in IE. If someone wants to help, he will be appreciated.

You can check the effect of http://jsfiddle.net/shabirgilkar/Mu9jL/ .

Answer 1

IE 8 and below do not support the CSS3 box-shadow property, but you can make it work. You should check out these articles ...

• http://dev.opera.com/articles/view/cross-browser-box-shadows/
• http://dimox.net/cross-browser-css3-box-shadow/
• http://fetchak.com/ie-css3/

I would recommend using images for IE 8 and below (use conditional style sheets).

I came up with a crappy solution, but it works in IE 8, Chrome, Firefox, Safari, and Opera. Look at the fiddle ...

http://jsfiddle.net/UnsungHero97/Mu9jL/3/

Hope this helps. Christo

Answer 2

http://css3generator.com/

Select window 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 do you mean? Different versions are very different.

Answer 3

Currently (November 2011), it doesn’t appear that someone has developed a polyfill for IE8 or IE7 to do what you want. See, for example, CSS3PIE (https://github.com/lojjic/PIE/issues/3), which has mailbox support but does not support the insert flag.

Your best (only?) Option is to create an image to use as the background for the element. This is obviously not a good solution.

(In addition, to help you and others find other useful policies, here is a useful link: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills )