CODEWITHSUNDEEP
listcssunordered
Andy Nightingale
Andy Nightingale

Reputation: 149

CSS3 box-shadow on <li> element not working

I have a grid of 12 boxes created from an unordered list as below. Border radius works fine, but IU can't get the shadow to appear. Does the box-shadow property only work on divs, but not display block elements?

   <ul id="treatments">
   <li id="eyelash"></li>
   <li id="massage"></li>
   <li id="tanning"></li>
   <li id="facials"></li>
   <li id="waxing"></li>
   <li id="tinting"></li>
   <li id="threading"></li>
   <li id="nails"></li>
   <li id="makeup"></li>
   <li id="hair"></li>
   <li id="courses"></li>
   <li id="bespoke"></li> 
   </ul>

    #content #treatments li {
    height: 125px;
    width: 125px;
    display: block;
    float: left;
    margin-right: 13px;
    margin-bottom: 13px;
   -moz-box-shadow: 1px 1px 2px #777;
   -webkit-box-shadow: 1px 1px 2px #777;
    box-shadow: 1px 1px 2px #777;
   -moz-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/scipts/PIE.php);
    }

Upvotes: 1

Views: 13898

Answers (3)

mvermand
mvermand

Reputation: 6137

Be sure that the margin of <li> is not set to zero.

The box-shadow is rendered in the margin. No margin -> no shadow.

Upvotes: 4

Олег Всильдеревьев
Олег Всильдеревьев

Reputation: 943

I had same problem... box-shadow didn't work... The reason was in rbga instead of rgba in my css code! :D

Upvotes: -1

user734709
user734709

Reputation:

You shouldn't have any issues with using box-shadow on li elements since box-shadow can be applied to all elements. Here's the section on box-shadow on the W3C site.

Upvotes: 0

Related Questions