Any way to make this css work in most IE versions?

Question

I have this code to cast a shadow on imagese:

.shadow{
box-shadow: -2px 2px 4px #666;
-webkit-box-shadow: -2px 2px 4px #666;
-moz-box-shadow: -2px 2px 4px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);
}

This works in FF, Opera, Safari, Chrome but not in IE6 (haven't tested any other IE version yet)

Thanks

UPDATE:

 <img src="......" class="shadow">

No width or height specified...

The problem is that the shadow is crisp and completely black, instead of fading like a shadow should, and like it does in FF for example. Hard to describe... The shadow is there, but it isn't faded, its like a black box behind the image.

Answer 1

Using a colon in a CSS property is definitely incorrect. The correct way to address those DX filters seems to be an underscore:

filter: progid_DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);

Answer 2

The element needs to have layout (from MSDN):

Almost any object can have filters applied to it. However, the object that the filter is applied to must have layout before the filter effect will display. Put simply, having layout means that an object has a defined height and width. Some objects, like form controls, have layout by default. All other filterable objects gain layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

Also see On having layout for more details.

Note also that that filter syntax will only work in IE6 and IE7. IE8 needs the -ms-filter property instead, and its value should be in quotes.

In short, to make it work in IE6, add zoom: 1, and to make it work in IE8 too, add an -ms-filter property (before the filter property!):

.shadow {
    box-shadow: -2px 2px 4px #666;
    -webkit-box-shadow: -2px 2px 4px #666;
    -moz-box-shadow: -2px 2px 4px #666;
    -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true)";
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);
    zoom: 1;
}

Answer 3

use something like this and change according to your needs:

.shadow{
box-shadow: -2px 2px 4px #666;
-webkit-box-shadow: -2px 2px 4px #666;
-moz-box-shadow: -2px 2px 4px #666;
cursor:hand;
height:160px; 
padding:10px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=-2, OffY=2,  Color=#666, Positive='true');
}

it works ie7 & 8 (I don't have 6).