Home/ Questions/Q 4267418
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T06:53:48+00:00

I’m trying to simulate a floating modal box type thing but having an issue

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0