CODEWITHSUNDEEP
htmlcss
Jorge
Jorge

Reputation: 18257

shadows looking bad in IE 9

looking in internet how put a shadows to my containers i found this code that i apply to my divs 

.boxShadow {
   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
}

Now, this code make's that my divs look great in chrome and Firefox this is how it look in chrome and FF

But for some reason this is how looks like in IE 9 this is how it's looks in IE 9

I know that the style it's different for chrome and FF against IE but i want to know why my style are adding shadow to the characters too, is there a way to solve this?? thanks for your help

Upvotes: 1

Views: 224

Answers (1)

Behrang Saeedzadeh
Behrang Saeedzadeh

Reputation: 47961

Replace your rule with this:

.boxShadow {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

To support IE 6, 7, and 8, then add a conditional CSS containing this rule:

.boxShadow {
  behavior: url(ie-css3.htc);
}

Download ie-css3.htc from http://box-shadow.googlecode.com/files/ie-css3.htc.

Upvotes: 2

Related Questions