Why does this button appear blue in IE9?

Question

I have specified in my class .btnDeleteCostEstimate button to override the default background. In Chrome, it appears correctly as light gray. However, in IE9, it appears as a dark blue.

It looks like the color is coming from the .BPMButton class by the following property:

background-color: rgb(27, 117, 188)

Can anyone tell me what I can do to make the button appear in IE9 the same way it appears in Chrome?

Here is my jsfiddle: http://jsfiddle.net/8DL3q/

Here is screenshot, as you can see, there is a dark blue gradient effect in IE9 whereas the expected gradient would be light grey (as shown in Chrome):

Answer 1

Try changing the background colour (line 4) to another colour.
(change background-color: #1b75bc; ).
There is nowhere else in the code where that colour (#1B75BC) is referenced.

On line 25 you have background-image: -ms-linear-gradient(bottom, #124B80 0%, #1B76BC 100%);
IE9 doesn't support gradients: ( Gradients in Internet Explorer 9 )

Answer 2

Because IE9 doesn't support CSS Gradients - see caniuse . If you want to use gradients you you can use colorzilla

Answer 3

The problem was, I was specifying my colors as:

background-image: linear-gradient(bottom, #555 0%, #999 100%);

Which, IE9 interprets as this:

background-image: linear-gradient(bottom, #000555 0%, #000999 100%);

Whereas, Google Chrome interprets it as this (correctly):

background-image: linear-gradient(bottom, #555555 0%, #999999 100%);

So, to fix it, I just had to change to this and it works in both browsers:

background-image: linear-gradient(bottom, #555555 0%, #999999 100%);

Here is the example that now works in both browsers: http://jsfiddle.net/8DL3q/11/