linear-gradient using CSS3 PIE in IE9 not working, IE8 does

Question

I've decided to completely drop support for IE6 and IE7 in my website, redirecting it's users to a text-only warning page. However I still support IE8 and IE9.

I am achieving this using CSS3 PIE, and border-radius works in both (IE8/9), box-shadow works in both, however I also rely on linear-gradient. I have heaps of tags in use to achieve this:

background: #E6E6E6; /* fallback */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */

behavior: url(/PIE.htc); /* load PIE.htc */

linear-gradient works in IE8, but not IE9, oddly. I've tried any solutions I've found, but they haven't worked. IE8 just shows the fallback: background: #E6E6E6; - not a gradient.

I don't think it's anything wrong with the server or anything like that, because the other properties - border-radius and box-shadow - work with PIE but not without.

I've got all the properties to work in all browsers I support - just not IE9 :(

Any ideas?
Thanks

Answer 1

OK, here's my fix. It certainly isn't pretty, but it works.

<style type="text/css">
body{
  background: #E6E6E6;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7));
  background: -webkit-linear-gradient(#E6E6E6, #B3BCC7);
  background: -moz-linear-gradient(#E6E6E6, #B3BCC7);
  background: -ms-linear-gradient(#E6E6E6, #B3BCC7);
  background: -o-linear-gradient(#E6E6E6, #B3BCC7);
  background: linear-gradient(#E6E6E6, #B3BCC7);
  -pie-background: linear-gradient(#E6E6E6, #B3BCC7);

  behavior: url(/PIE.htc); 
}
</style>

<!--[if IE 9]><style>body{ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc); } </style><![endif]-->

EDIT: If anybody wants them, PIE.htc is found at http://www.css3pie.com and ie9-gradient-fix.htc is found at http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip. I couldn't get ie9-gradient-fix.htc to work unless it was in the root directory, PIE.htc worked in my /resources/ directory.