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):

enter image description here

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

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)

edited May 23 '17 at 12:07

Community

1
1

answered Jul 08 '14 at 19:38

Aster

227
1
13

Thanks but if I remove that line it doesn't seem to change anything. The button is still blue. If I change it to another color, there is still no effect. – user1477388 Jul 08 '14 at 19:39
What colour blue is it exactly? (In hex). – Aster Jul 08 '14 at 19:41
You can see it in IE9 if you open it. The actual color appears to be 1B75BC i.e. rgb(27, 117, 188). – user1477388 Jul 08 '14 at 19:42
As a fallback, it should use the `background-color` property from line #4, but it doesn't appear to be respecting that. How can I get it to fallback to grey on fail (and not the dark blue)? – user1477388 Jul 08 '14 at 19:46
It is definitely the background colour from what I can see. There's nothing else in the code referencing #1B75BC. Try Ctrl+F5? – Aster Jul 08 '14 at 19:48
I updated the jsfiddle to use the proper background color (#999), but there seems to be no effect http://jsfiddle.net/8DL3q/9/ Any idea how to make the background grey in IE? – user1477388 Jul 08 '14 at 19:51
Alas not sorry =/ I've got to shoot off somewhere. I hope you manage to find an answer! :D – Aster Jul 08 '14 at 19:57

score 0 · Answer 2 · edited Jul 08 '14 at 21:31

0

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

edited Jul 08 '14 at 21:31

Wayne Werner

49,299
29
200
290

answered Jul 08 '14 at 19:43

cipionhabla

11

colorzilla actually helped me find my answer. Once I entered #555 I realized it was converting it to #000555 which is exactly what IE9 was doing. To fix it, I just specified the full hexadecimal value #555555 (as per my answer below). Thanks for your help. – user1477388 Jul 09 '14 at 13:57

score 0 · Accepted Answer · answered Jul 09 '14 at 13:37

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/

Why does this button appear blue in IE9?

3 Answers3