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?

[kuroi]

As website Rob explained, IE8 and below doesn't support drop shadow. You can't fix that with PHP, only something in the browser.

But why bother? Are you really going to get more sales by adding drop show for users of older versions of IE?

Your video not working is a more serious issue, but the sort of problem that you've described often arises because the attempt to fix one (IE8 drop shadow) introduces code that interferes elsewhere. Have you used IE conditional statements or are your IE8 attempted fixes available to other browsers too?

[Bloob]

...the problem is not sales, but the functionality of the website.

When I use this Code (this work on IE9 - Firefox .... and don't work (not displayed) on IE8)

.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;



when I use this Code (work on all Browser (is displayed), but the website is very slow, the FLV videos and Slideshow don't work:

.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;


SOLUTION:
I added (for IE8) a Black Border in the Layout.

if you want to see: www.rarehorrordvds.com
...and see it on different browsers

THANKS.

[Website Rob]

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

As mentioned, PHP changes will not help as this is a CSS related problem.

On the other hand, running your code through a Validator and fixing some (all?) of the coding errors will greatly enhance how the site is displayed... in any Browser.

[Bloob]

ok, I will make more attempts.

Thanks for the help.