Drop Shadow Doesn't Work in IE8

[Bloob]

Hello,
the drop shadow in my layout doesn't work in IE8.
Work in IE9 and Firefox and I can not understand why it does not work in IE8.
This is my stylesheet Code:

.shadow {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 35px -1px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
/* For IE 8 */
/*-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=360, Color='#000000')";*/
/* -ms-filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40'); */
/* For IE 5.5 - 7 */
/*filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=360, Color='#000000');*/
/* filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10', MakeShadow='true', ShadowOpacity='0.40');*/
zoom: 1;
border:#999 solid 1px;
}



If anyone knows the solution of the problem.
My Zen Cart version is 1.3.9
Thanks.

[Design75]

How about removing the comment tags

[Website Rob]

Along with your IE8 problem it seems you are also suffering from code pollution.

To solve your problem though, try the following.

CSS
.shadow {
-moz-box-shadow: 0 0 14px 3px #999;
-webkit-box-shadow: 0 0 14px 3px #999;
box-shadow: 0 0 14px 3px #999; /* this is used by IE9 */

/* For IE 8 and below */
background:white;
-ms-filter: "progidXImageTransform.Microsoft.Blur(PixelRadius=4,MakeShadow=true,ShadowOpacity=0.30) ";
zoom: 1;
}

.shadow .content { position:relative }


HTML

<div class="shadow">
<div class="content">

image code here

</div>
</div>

Adjust the above to suit your needs.

The problem with < IE9 Browsers, as IE9 understands things better, you have to do two extra things:

background:white; - in your CSS

and using another DIV in your HTML

<div class="content">

image code here

</div>

[Website Rob]

OK, just realized you are trying to do an "inset" shadow and with < IE9 it ain't gonna happen. Sorry.

Perhaps though, the code I posted will come in handy for others?

[Website Rob]

After a bit of searching, it seems you could do it in < IE9 but you will probably have to use JS / jQuery or some convoluted CSS specific for IE.

[Bloob]

The problem also arises with the conflict with JWPlayer: Example:
If I add the drop shadow in IE8, all videos are displayed wrong (bad Audio/Video, video choppiness...) (*NOTE: the videos are displayed wrong in all Browser) ,
if instead, disable the drop shadow in IE8, all videos are displayed without any problem.

...and I can not solve this problem!

A question for "Website Rob":
where and what should be changes to the PHP?