box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome
HtmlInternet Explorer-9CssHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
As discovered (not by me) in the comments, you must add border-collapse: separate; to the element that box-shadow is not working on.
And from my original answer, also make sure you have a valid doctype as the very first line, such as <!DOCTYPE html>. Hit F12 to bring up the Developer Tools, and make sure IE9 mode (or later) is being used, because it's required for box-shadow to work.
Solution 2 - Html
Just confirming this issue and 2nd'ing @Arowin's final workaround since its might be missed by some folks - add border-collapse:separate; to the affected <div> - IE9 now shows the correct shadow when a <div> is contained in a <table> with border-collapse:collapse; set. Thanks!
Solution 3 - Html
The IE9 input box-shadow bug solution will work on this bug.
input{
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}
border-collapse: separate; is what you need to add to resolve this issue on tables.
Solution 4 - Html
In my case, IE 9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.
Solution 5 - Html
I had athe same issue. Actually IE9 does not require any doctype for these styles to work. Whats causing the problem is "border-collapse:collapse" on tables with shadow - use cellspacing=0 then it works - still: bugger IE
Solution 6 - Html
The border-collapse: separate; only partially solved it for me. We have background-color added to the rows (tr) and shadow under the row that is selected (and expanded).
The background-color blocks the shadow as it seems to be a z-index kind issue. Anyway we solved it with the rgba value for the color. We choose darker row color and used 20% for alpha value so the shadow underneat could be shown.
table { border-collapse: separate;}
tr:nth-child(even) { /* odd color transparent /
/ background-color: someothercolor; */ /*shadow did not display thru solid color */
background-color: rgba(168,163,136,.2);
}
Solution 7 - Html
In my case nothing helped. After hours of debugging I found that The following meta tag was the problem:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Solution 8 - Html
Yes, if you do some resetting for several html elements in your css like (I myself just copy and paste stuff from old projects, never thinking about consequences :D):
html, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, dl, dt, dd, ol, ul,
li, legend, table, tbody, tr, th, td {
order:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
border-spacing: 0;
border-collapse: collapse;
}
well... cut that border-collapse: collapse
table, tbody, tr, th, td {
border-collapse: collapse;
}
... so it's not applied to your div, p, span, img or wherever you need the shadow to be.
Solution 9 - Html
I had a div that was inside of a table cell. Using border-collapse:separate on the div solved the problem for me.
Solution 10 - Html
In my case switching from Transitional to Strict XHTML-doctype helped.
Removing border-collapse from the container-table ALSO helped.
Solution 11 - Html
This meta tag solved it for me. It has also solve other strange IE issues that don't occur in Chrome and Firefox:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />