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.