title: Why does a background break a box-shadow inset effect?
body: <p>Im trying to achieve an inner-shadow effect on a simple box, something like:
  <a href="http://gotinsane.com/test.jpg">alt text http://gotinsane.com/test.jpg</a></p>
  
  <p>where the green box is the content inside another box.</p>
  
  <p>My problem is that if i give the content box any kind of background, the outer box box-shadow effect vanish!</p>
  
  <p><a href="http://jsfiddle.net/FEk3c/3/">Here an example of my problem</a> (with markup and css), i've set the content height smaller to evidence the problem - atm i really dont care about IE*, this is just a test.</p>
  
  <p>Any idea?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The content inside the box is a somewhat kind of slide, <a href="http://jsfiddle.net/FEk3c/8/">here an example (original problem)</a>.
  thirtydot's answer does the trick, but it forces me to make a little hack, changing the wrapper background in function of the content: <a href="http://jsfiddle.net/sMDsX/6/">example here (thirtydot trick)</a>.</p>
  
  <p>This can be a solution, but i dont like it too much and still dont understand why the outer box shadow get behind the inner box background (color, image)</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>Talking about this problem on another forum, i <a href="http://jsfiddle.net/9LqSn/1/">found another way</a>: basically, instead of use <code>box-shadow</code> on the wrapper, that will act as a mask, I use <code>box-shadow</code> and <code>border-radius</code> directly on the content (<code>.step</code> elements)
  However, the 'mask' effect is exactly what i was trying to accomplish, so this isnt the solution neither.</p>
  
  <p><strike>I still don't understand how and why an inner element background interfere with an outer element design, or why the shadow dropped from the outer element get behind the inner one. Could this be a css bug?</strike></p>
  
  <p><strong>UPDATE3</strong></p>
  
  <p>Someone opened a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=644895">bug on mozilla</a>, and got this answer that clearify the 'problem':</p>
  
  <blockquote>
    <p>From <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">http://www.w3.org/TR/css3-background/#the-box-shadow</a> :</p>
    
    <blockquote>
      <p>In terms of stacking contexts and the painting order, the outer shadows of an
      element are drawn immediately below the background of that element, and the
      inner shadows of an element are drawn immediately above the background of
      that element (below the borders and border image, if any). </p>
    </blockquote>
    
    <p>In particular, the backgrounds of <em>children</em> of the element would paint above
    the inset shadow (and in fact they paint above the borders and background of
    the element itself).</p>
    
    <p>So the rendering is exactly what the spec calls for.</p>
  </blockquote>
  
  <p><strong>UPDATE4</strong></p>
  
  <p>Fabio A. pointed out another solution, <a href="http://jsfiddle.net/HPkd3/">with css3 <code>pointer-events</code></a>.
  Looks good and works on IE8 too ;)</p>