title: css3pie styling failure- displays nothing
body: <p>I am working on a web page that uses css3pie to drastically increase IE8 support.  The page, you will notice, has "Upload" and "Download" buttons, which look nice in modern browsers.</p>
  
  <p>In IE8 with css3pie, it looks <em>almost</em> as nice... (still lacks inset shadows) or at least it used to.  I did a lot of edits while using Chrome, and then checked back to IE8.  Big mistake.</p>
  
  <p>Somewhere in the middle of those edits, I broke css3pie, and I've tried <em>everything</em> I can think of to fix it, but I just can't figure it out...</p>
  
  <p>It may be worth nothing that when it worked, the buttons were contained in <code>&lt;div&gt;</code> tags, not <code>&lt;span&gt;</code> tags, (I changed it to make it valid HTML) though changing it back to a <code>&lt;div&gt;</code> does not fix it.</p>
  
  <p>Do you know what is wrong, and if applicable, how I can avoid it in the future?</p>
  
  <p>IE8's failure:<br>
  <img src="https://i.stack.imgur.com/Uzh8e.png" alt="IE8"></p>
  
  <p>What it should look somewhat like:<br>
  <img src="https://i.stack.imgur.com/yizag.png" alt="Goal"></p>
  
  <p>(white steak at top and white text shadow does not render even with css3pie working though)</p>
  
  <p><strong>CSS code:</strong></p>
  
  <pre><code>span.button {
      behavior: url(/css/PIE/PIE.htc);
      display:inline-block;
  
      color:rgb(38,67,107);
      text-shadow: 0px 1px 0px #FFFFFF;
      font-family: 'Oswald', sans-serif;
      font-size: 140%;
  
      padding-top:1px;
      padding-bottom:3px;
      padding-left:10px;
      padding-right:10px;
  
      background-color:rgb(200,225,255);
  
      background-image: linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
      background-image: -o-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
      background-image: -moz-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
      background-image: -webkit-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
      background-image: -ms-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
      -pie-background: linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
  
      background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(185,209,250)),
          color-stop(0.69, rgb(200,225,255))
      );
  
      border:1px solid rgb(120,140,180);
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
  
      box-shadow: inset 0 2px 4px 0 #FFFFFF;
      -webkit-box-shadow: inset 0 2px 4px 0 #FFFFFF;
      -moz-box-shadow: inset 0 2px 4px 0 #FFFFFF;
  }
  
  span.button:hover {
      text-shadow: 0px 1px 0px rgb(242,242,242);
      background-color:rgb(190,213,242);
  
      background-image: linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
      background-image: -o-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
      background-image: -moz-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
      background-image: -webkit-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
      background-image: -ms-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
      -pie-background: linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
  
      background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(176,199,238)),
          color-stop(0.69, rgb(190,214,242))
      );
  
      border:1px solid rgb(96,112,144);
  }
  
  span.button:active {
      box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
      -webkit-box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
      -moz-box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
      background-color:rgb(155,200,232);
  }
  </code></pre>