Menu
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?
680
BROWSER SUPPORT FOR CSS3 Box-shadowCSS3 Box-shadow is supported by Chrome browser version 10 to Chrome browser version 67.
You need to split your code into an outer and an inner DIV and only apply the drop shadow to the inner div. You would need two elements each with their own box-shadow and the triangle 'element' would need to be transformed.
You can add CSS shadow to the element box or the text inside it. A common practice is setting horizontal and vertical properties to indicate the shadow position.
box-shadow: h-shadow v-shadow blur spread color inset; In your example you're offsetting shadow by 10px vertically and horizontally. Like in other comments set first two values to 0px in order to have even shadow on all sides.
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.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
