After much experimentation, I am on the verge of achieving an inset box shadow for IE8 without relying on JavaScript.
Take a look at the screenshot below:
Since Internet Explorer versions 5.5 through 8 only support Microsoft's "dropshadows" and "shadows" instead of box shadows, I have had to resort to using this specific code snippet:
#box {
/* Standard CSS rules applying to all browsers. If no background-color is set, the box will be transparent */
border: solid 1px #808080;
margin: 10px;
padding: 10px;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
}<body>
<div id="box">
</div>
</body>(Please note that this shadow effect will only appear in IE5.5 through 8 as shadows and drop shadows were discontinued in IE9, replaced by box shadows).
I have successfully eliminated the inside shadow of the box with the following adjustment:
#box {
/* Additional CSS properties introduced to remove the background transparency */
background-color:white;
border: solid 1px #808080;
margin: 10px;
padding: 10px;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
}<body>
<div id="box">
</div>
</body>The updated appearance can be seen here:
My current challenge lies in creating an inset shadow specifically, where only the outer shadow is removed. Any suggestions on how to achieve this?