css

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');

 

 

Z-Index troubles for IE.    From what I got from the link below… don’t use position:relative as much as possible.  Once you use position:relative, it puts the element and all it’s children onto another stack and z-index will not work.

As far as I know this applies to IE 7 and earlier.  IE 8 seems to work similar to Firefox.  Can’t wait til the day IE 7 is dead.

 

searched:  ie z-index not working
source:  http://www.webmasterworld.com/css/3716455.htm