filter: progid:DXImageTransform.Microsoft.gradient CSS property not working in IE

Question

I'm using pieces of twitter's bootstrap css for our nav bar. Naturally everything looks great in Chrome and Firefox, but total crap in IE. I'm stumped because they have the proper css filter command for the gradient in IE, and, after doing some research, I found that occasionally IE will have a problem in the color codes are not 3 digits Hex, so I changed everything over and still have the same issue.

Here is how the gradient looks in

Chrome

and IE

and here is the CSS

.navbar-inner {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #36C;
  background-image: -moz-linear-gradient(top,       #33C, #69C);
  background-image: -ms-linear-gradient(top,    #33C, #69C);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #33C), to(#69C));
  background-image: -webkit-linear-gradient(top,    #33C, #69C);
  background-image: -o-linear-gradient(top,     #33C, #69C);
  background-image: linear-gradient(top,    #33C, #69C);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='    #33C', endColorstr='#69C', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.btn-navbar {
  display: none;
  float: right;
  padding: 7px 10px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #36C;
  background-image: -moz-linear-gradient(top,   #33C, #66C);
  background-image: -ms-linear-gradient(top,    #33C, #66C);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #33C), to(#66C));
  background-image: -webkit-linear-gradient(top,    #33C, #66C);
  background-image: -o-linear-gradient(top,     #33C, #66C);
  background-image: linear-gradient(top,    #33C, #66C);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='    #33C', endColorstr='#66C', GradientType=0);
  border-color: #66C #66C #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}

Answer 1

I believe that the gradient filter required full #AARRGGBB colour codes. Just #33C won't do. Try #003333CC instead. If that comes out transparent, try #7F3333CC - I can never remember which way around it goes.

PS. Try IE10. But get rid of the -ms-linear-gradient since it never existed since they went straight to linear-gradient .