Box Shadow in CSS internet Explorer 8 problem

Question

I have a question about IE8 with css. I pasted code in my css from msdn

.shadow {-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";}

I used the problem code like this

<div class="shadow"> <p>Bla Bla</p> </div>

And i have a problem about that. I want only DIV has shadow but "Bla Bla" has shadow too.

Can anyone suggest a method to fix this issue?

Thanks...

Answer 1

You need to specify a background color for your element:

http://jsfiddle.net/UNKAc/14/

.shadow {
    background:#fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
}

Don't quote me on this but: i think this is because IE tries to cast a light that need a solid to drop a shadow. And since your div is transparent atm the only thing that can cast a shadow is the text itself.

Answer 2

You could apply background-color: #fff to your div , then you won't be able to see the shadow drawn by the text.

However, the filter doesn't look as good as box-shadow from CSS3.

IE8 does not support box-shadow , but you can emulate it with CSS3 PIE .

Answer 3

I know this is a couple weeks old, but if you're still tweaking at all you should really look at CSS3 PIE. One of my friends here at work showed it to me and it's pretty great if you can rely on JS for these types of enhancements for IE.

http://css3pie.com/documentation/pie-js/