• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

No Shadow in Internet Explorer

December 30, 2011 by Webhead

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

 

 

Filed Under: Coding Tagged With: css, IE crap

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools