Posted almost 9 years ago. Visible to the public. Linked content. Deprecated.

CSS box-shadow not working in IE9 inside tables with collapsing borders

Microsoft does not support IE9 anymore, and neither do we.

Though Internet Explorer 9 supports the box-shadow CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.

Consider this HTML:

Copy
<table style="border-collapse: collapse"> <tr> <td> <div style="box-shadow: 0 0 10px #f00">Hello universe</div> </td> </tr> </table>

While it works in other browsers, IE9 is not showing any shadow. For some reason, it requires border-collapse: separate for the table to be set:

Copy
<table style="border-collapse: separate" cellspacing="0"> ...

Although this does the trick, you need to set a zero cellspacing in the HTML (or border-spacing in CSS, if possible) to avoid space between table cells.\
If you previously gave borders to your th and td elements, those will no longer overlap. One solution is to only use borders on the bottom and right sides.

Or, you could just avoid using tables and save yourself some IE trouble.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
over 2 years ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more