I'm trying to simulate a floating modal box type thing but having an issue with IE9 and its box shadow implementation.
Here's a summary of the code I'm using which can duplicate the issue:
<html>
<head>
<title>Sample page</title>
<style>
.content-holder {
border-collapse: collapse;
}
.back {
background-color: #a8c0ff;
padding: 100px;
}
.inner {
background-color: #fff;
text-align: center;
padding: 50px;
box-shadow: 0px 0px 20px #000;
}
</style>
</head>
<body>
<table class="content-holder">
<tr>
<td>
<div class="back">
<div class="inner">
<h2>Heading</h2>
<p class="subtext">Some text here</p>
<p>More text</p>
<a class="button" href="#">A button</a>
</div>
</div>
</td>
</tr>
</table>
</body>
It works fine in Firefox/Chrome etc but IE9 doesn't display the shadow. I can change it to an inset shadow and it appears as it should, but an outer shadow continues to elude me.
Anyone out there able to shed some light on this shadow problem?