CSS3 Pie Gradients Not Working in IE9

[pealo86]

I am using http://css3pie.com to add CSS3 features (just border-radius and background gradients) to this site I'm building:

http://concept.freshbeat.co.uk/match2move-27102011-02/0-dev/

 

However, the gradient backgrounds do not appear to be working in IE9. According to the CSS3 PIE website, the latest version adds support for IE9 gradients.

 

It's strange how it works in IE 6, 7 and 8 but not in IE9. Has anyone else had this problem?

 

For example, I am styling the pink navigation bar like so:

 

#nav {
    behavior: url(./script/PIE-1.0beta5/PIE.htc);
    background: #fa3b90; /* Old browsers */
    background: -moz-linear-gradient(top, #fa3b90 0%, #c80468 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa3b90), color-stop(100%,#c80468)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fa3b90 0%,#c80468 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fa3b90 0%,#c80468 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fa3b90 0%,#c80468 100%); /* IE10+ */
    background: linear-gradient(top, #fa3b90 0%,#c80468 100%); /* W3C */
    -pie-background: linear-gradient(top, #fa3b90 0%,#c80468 100%); /* PIE */
    margin: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    float: left;
    width: 928px;
    padding-left: 10px;
    margin-bottom: 10px;
    border: #fa3b90 solid 1px;
}

 

 

[Frank P]

I only use PIE for gradients in the development phase. When my client is satisfied with the look, which I present through screen shots that I put on the internet, I make a graphic gradient. Much less code and less rendering problems. You can have gradients made online, too, for free. And with the current internet connection speeds, small images like gradients are downloaded in no time at all.