Search code examples
cssinternet-explorer-8hoverdropshadowbox-shadow

Is it possible to use box-shadow in IE8?


Why is this CSS being applied inconsistently across frameworks/environments/browsers?

I've got a prototype created in Meteor where the CSS works fine in creating a shadow effect and adding a border to various images as they are hovered; specifically, in the Meteor prototype (it's a Sharepoint app, but testing features like this out is much quicker with Meteor) I have this CSS:

#imgPostTravelTop:hover, #imgPostTravelTopRight:hover, #imgPostTravelCenter:hover, #imgPostTravelBottom:hover {
  z-index: 4;
    -moz-box-shadow: 0 0 7px #000;
    -webkit-box-shadow: 0 0 7px #000;
    box-shadow: 0 0 7px #000;

  border: 1px solid gold;
}

It works fine - on mouseenter / hovering into an image, it grows a golden five O'Clock shadow.

However, virtually the same thing in the Sharepoint code:

.finaff-form-help-post-travel-centerimage:hover, 
.finaff-form-help-post-travel-bottomimage:hover {
    z-index: 4;
    -moz-box-shadow: inset 0 0 7px #000;
    -webkit-box-shadow: inset 0 0 7px #000;
    box-shadow: inset 0 0 7px #000;

    border: 1px solid gold;
}

...only works in Chrome and Firefox (not in IE8).

I tried this, which supposedly works in IE8:

#imgPostTravel:hover {
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

...but it doesn't work (does not add a box-shadow to IE8).

Is there anything I can to do get a box-shadow to work in IE8?


Solution

  • You can try @thirtydot answer:

    Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.

    It supports box-shadow (except for the inset keyword).

    EDIT:

    or you can try @Marcus Pope answer :

    filter: 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2); 
    

    Possible duplicate of
    Box shadow in IE7 and IE8
    CSS3 Box Shadow Effect for IE8?