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

html internet-explorer-9 css
Arowin picture Arowin · Apr 11, 2011 · Viewed 51.4k times · Source

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?

Answer

thirtydot picture thirtydot · Apr 11, 2011

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.

Related questions

Why does IE9 switch to compatibility mode on my website?

I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing …

Read More
How do I make an "else" in an IE HTML conditional?

<!--[if lt IE 9]> This is less then IE9 ELSE this is all browsers: firefox, chrome, etc. <![endif]--> How do I do this in my HTML? I want to do an "else" ...

Read More
Target IE9 Only via CSS

Just wondering given these IE hacks in my bag of tricks "\9" - for IE8 and below. "*" - for IE7 and below. "_" - for IE6. i.e. such as body { border:2px solid blue; border:2px solid yellow \9; *border:2px solid …

Read More