box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

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?

Answers


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.


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!


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.


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


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);
}

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.


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" />

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 out of there and add it as a separate

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.


I had a div that was inside of a table cell. Using border-collapse:separate on the div solved the problem for me.


In my case switching from Transitional to Strict XHTML-doctype helped.

Removing border-collapse from the container-table ALSO helped.


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" />

Need Your Help

adb only show authorization for root - Android studio on Ubuntu

android linux ubuntu

I recently switched to Ubuntu 15.10 (Gnome flavor). I installed Android Studio by copying it into /opt. From here I can start studio.sh as mentioned in the tutorial.