CODEWITHSUNDEEP
htmlcssinternet-explorer-8msdn
user695763
user695763

Reputation: 43

Box Shadow in CSS internet Explorer 8 problem

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...

Upvotes: 4

Views: 6972

Answers (3)

vernonk
vernonk

Reputation: 1221

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/

Upvotes: 2

easwee
easwee

Reputation: 15895

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.

Upvotes: 6

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 2

Related Questions