CSS Gradients in IE 8+ working on all parts of the site except one

Question

While testing browser compatibility for a site that I'm designing currently, I found that CSS Gradients are working fine on all parts of the site except the navigation links in IE 8 and IE 9.

I'm using the 'filter' property for that. The HTML structure of the nav is

<ul id="nav"><li><a>Some Name</a></li></ul>

and the CSS for the element is,

#nav li a
{
background: rgb(191,82,0);
background: -moz-linear-gradient(top, rgb(191,82,0) 0%, rgb(124,51,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,82,0)), color-stop(100%,rgb(124,51,0)));
background: -webkit-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
background: -o-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
background: -ms-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf5200', endColorstr='#7c3300',GradientType=0 );
background: linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
position: relative;
height: 1.3em;
padding: 0.2em 2em 0.1em 2em;
color: #FFF;
font-size: 0.9em;
font-family: FertigoProRegular;
text-transform: uppercase;
border-radius: 1em;
box-shadow: 0em 0em 0.5em #aaa;
border-bottom: 3px solid #5C2600;
}

I tried assigning a specific ID to the nav links and then apply the CSS to it. But that didn't work out. I know PIE and other such HTC behavior elements would work. But I want to know why exactly it's not working only in that area.

First I thought that it's a problem which occurs with all <a> elements. But that wasn't the case either as the Gradients displayed perfectly on other <a> elements on the site. The problem is limited to the nav links.

Any help would be appreciated.

Answer 1

when i doing a gradient menu i always use Ultimate CSS Gradient Generator

Outputs older Internet Explorer opacity format (yes, this will even work with IE6!

Answer 2

Your code is OK. Just tried it in my IE8. The only problem is your colors. If you change start or end color of your filter you will see the difference;

If you change your filter to:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf5200', endColorstr='#7c33ee',GradientType=0 );

See in action http://jsbin.com/icenuk

You will see the code is working actually. It's the Ultimate CSS generator or IE DXImageTransform gradient issue that they don't produce same gradient as standard CSS gradient. You may need to change the colors manually in the filter to get what you want. Or you can use another gradient generator like this :