Inner Box Shadow Div [duplicate] - html

Question

This question already has answers here:
Inner shadow to div in IE
(3 answers)
Closed 9 years ago.
Need help converting some css that I have working in the good browsers to now work for internet explorer. This is what I have right now
.headerLoginFooter
{
background-color:#f5f5f5;
padding:7px 10px 7px 10px;
margin:20px 0 0 0;
-moz-box-shadow:inset 0 8px 6px -6px #c4c4c4;
-webkit-box-shadow:inset 0 8px 6px -6px #c4c4c4;
box-shadow:inset 0 8px 6px -6px #c4c4c4;
}
The three attributes at the end are producing an inward glow within the footer section of the login box for that div that looks like this
I was able to get the code for this styling here CSS Tricks but I need to make this compatible for Internet Explorer. My first problem is I only have a mac so I don't have internet explorer to easily test my code. My second problem is I'm not getting how to convert the above code like he has in his code. Could someone help me convert my above code to work for internet explorer following the guidelines within the link. Thank you.

Answer 1

IE is very problematic with many CSS3 features, especially older versions.
I would recommend using CSSpie for use in your CSS stylesheet. This has been answered previously here.
Some things can prevent box-shadow from working in IE: (if they are applied to the same element)
rounded corners / border-radius
overflow:hidden
background-color
background gradients
To overcome this, I usually nest a container inside the one I want to style with a box-shadow.
<style>
.boxShadow {
behavior: url(PIE.htc);
-webkit-box-shadow: inset 0 8px 6px -6px #c4c4c4;
-moz-box-shadow: inset 0 8px 6px -6px #c4c4c4;
box-shadow: inset 0 8px 6px -6px #c4c4c4;
overflow:visible;
}
.otherStyles{
background-color:#f5f5f5;
border-radius:0px;/*or other value*/
/*gradients can be placed here too.*/
}
</style>
<div class="boxShadow">
<div class="otherStyles">
...content...
</div>
</div>