title: CSS3 box-shadow on <li> element not working
body: <p>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?</p>
  
  <pre><code>   &lt;ul id="treatments"&gt;
     &lt;li id="eyelash"&gt;&lt;/li&gt;
     &lt;li id="massage"&gt;&lt;/li&gt;
     &lt;li id="tanning"&gt;&lt;/li&gt;
     &lt;li id="facials"&gt;&lt;/li&gt;
     &lt;li id="waxing"&gt;&lt;/li&gt;
     &lt;li id="tinting"&gt;&lt;/li&gt;
     &lt;li id="threading"&gt;&lt;/li&gt;
     &lt;li id="nails"&gt;&lt;/li&gt;
     &lt;li id="makeup"&gt;&lt;/li&gt;
     &lt;li id="hair"&gt;&lt;/li&gt;
     &lt;li id="courses"&gt;&lt;/li&gt;
     &lt;li id="bespoke"&gt;&lt;/li&gt; 
     &lt;/ul&gt;
  
      #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);
      }
  </code></pre>