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?
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?