title: PIE.htc and jQuery animation conflict?
body: <p>I have a series of bullets that will appear in succession. I'm using jQuery and jQuery UI in the animation of the bullets. The top bullet needs to have rounded corners which I am using CSS and PIE.htc to accomplish. This works great in all non-IE browsers as well as IE8, but in IE7, the first bullet appears with it's background about 80% to narrow and about 95% to short (or perhaps it is extremely offset to the top left).</p>
  
  <p>Interestingly, if you resize the broswer window at all, the background snaps into proper place (not the bullets are in a fixed width container so I am not resizing the bullets here).  If I comment out the PIE.htc line in my CSS the bullet shows up properly, but I need the rounded corners.  See <a href="http://www.keystonelearning.com/test/bullet_error.jpg" rel="nofollow">this image</a>.</p>
  
  <p>Relevant code follows</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$([appripratebullet]).addClass('currentBullet').fadeIn('slow').prev().removeClass('currentBullet', 'slow');
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.bullet
  {
   display:none;
   color:#6e6e6e;
   min-height:40px;
   font-size:2.5em;
   line-height:1.5em;
   font-weight:normal;
   position:relative;
   padding:25px 20px;
   margin-top:1px;
   background:#eeeeee;
   border-bottom:1px solid #fff;
  }
  .bullet.first{
   margin-top:0;
   -moz-border-radius:8px 8px 0 0;
   -webkit-border-radius:8px 8px 0 0;
   border-radius:8px 8px 0 0;
   behavior: url(/Content/PIE.htc);
   }
  .bullet.currentBullet{
   background:#d98452;
   color:#fff;
   }
  </code></pre>