html - Why Displaying different gradient color on IE but works perfectly on firefox and chrome?

Question

I am working on one of the opensource projects. I am facing a weird problem. When I open the website on Firefox or Chrome it displays the color I expect, but on IE it does not show up in that color (it shows very light color). My guess is, that this is happening because of the gradient I am using which IE is not able to interpret correctly. Here is gradient CSS code:

#mainmenu {
  #css3_backgroundLinearGradient({
    'angle': 'top',
    'colors': [
      {'color': '#77D3F8', 'position': '0%'},
      {'color': '#3FA4D8', 'position': '100%'}
    ]
  })
  box-shadow: 0px 1px 2px $theme.linkColor;
}

When I do the view source on web page, I also see a line i.e:

  <div class="gradientfilterIE"></div>.   

I am not sure, is this line the culprit? But the complete open source project source code does not have this line with gradientfilterIE. I am not sure if this line is causing the issue then where is it coming from?

I need your expert opinion why I see different gradient color on IE but works perfectly on Firefox and Chrome.

Setting this actually solved my problem:

#mainmenu .gradientfilterIE {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77D3F8',     endColorstr='#3FA4D8',GradientType=0 );
}

Do we require filter: progid:DXImageTransform.Microsoft.gradient only for IE? Because on Firefox and Chrome, without this it also works fine.

Answer 1

Gradients only work in modern browsers and not IE but that CSS you show is invalid in the first place.