My Monkey Do

A Log of Coding Solutions

No Shadow in Internet Explorer

by

Who Will Cry When You Die?

 

Problem

I need some shadows using CSS in the non-modern browsers IE 7 and IE 8.  I found that it can be done with the filter attribute using the following code:

  .shadow {
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#444444')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#444444');
}

 

However, when I apply this to one of my existing elements, it does not show.  WHY?

 

Solution

If you look in the IE Developer Tools, you’ll see something funny.  You’ll probably see that if your existing element already uses a filter like maybe a gradient.  You’ll see that either the gradient or shadow filter will be overwritten.  So basically, you can’t have one filter (like shadow)  in one CSS class and another filter (like gradient) in another css class and use them on the same html element.  They will overwrite each other like any other CSS attribute.  Good job Microsoft!

So what you have to do is just append the filters like so:

 

 

 

	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4CA4BE', endColorstr='#37819B');progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#444444')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4CA4BE', endColorstr='#37819B') progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#444444');