When attempting to add box-shadow on a div hover effect in various browsers, I encountered an issue in IE 8 where the text also became shaded. Below are images illustrating the problem:
However, in Mozilla, the box-shadow effect is functioning correctly, as shown in the image below:
Here is the CSS code I am using for both scenarios:
.span3:hover {
box-shadow:1px 1px 5px 5px #E7E0E7;
-webkit-box-shadow:1px 1px 5px 5px #E7E0E7;
-moz-box-shadow:1px 1px 5px 5px #E7E0E7;
border-radius:3px;
}
.lt-ie9 .span3:hover {
box-shadow:1px 1px 5px 5px #E7E0E7;
border-radius:3px;
zoom: 1;
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=3),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=3),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1);
}
I would appreciate any guidance on how to resolve this issue. I have explored resources like css3pie.com but have not found a solution yet.