CODEWITHSUNDEEP
htmlcss
user2654308
user2654308

Reputation: 21

Div/Box Shadow Not Shows Everywhere EXCEPT IE10

Can anyone tell why the following HTML and CSS shows the Box Shadow on every browser except IE10? Did I miss something in Webkit? Thanks!

HTML:

<div id="Testimonials">
<ul class="ca-menu">
<li>
<a href="testimonials.html">
<div class="ca-icon"><img src="_images/Testimonials.jpg" width="92%"></div>
<div class="ca-content">Testimonials</div>
</a>
</li>
</ul>
</div>

CSS:

#Testimonials {
    clear: none;
    float: left;
    margin-left: 3%;
    width: 13%;
    display: block;
    border: thin;
    border-radius: 15.0%;
    -webkit-box-shadow:
    0 8px 0 #bfbfc2,
    0 15px 20px rgba(0,0,.35,.35);
    -moz-box-shadow:
    0 8px 0  #bfbfc2,
    0 15px 20px rgba(0,0,.35,.35);
    box-shadow:
    0 8px 0 #bfbfc2,
    0 15px 20px rgba(0,0,.35,.35);
    background-image: url(../_images/menu-bg%202.jpg);
   }

Upvotes: 0

Views: 114

Answers (2)

Rolf
Rolf

Reputation: 33

Had the same issue and was kindly presented with the solution here: box shadows not working in IE10

Upvotes: 1

Frederik.L
Frederik.L

Reputation: 5620

Try using

border-collapse: separate;

For some reason, it seems to help IE to render box-shadows.

Upvotes: 0

Related Questions