Question

I have the following submit button in IE9:

The CSS I’m using is as follows:

.button,
input[type='button'],
input[type='submit'] {
    text-decoration: none;
    background: #eee;
    color: #89a9d1;
    padding: 4px 10px;
    font-weight: bold;

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#eee')";
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background: -moz-linear-gradient(top,  #fff,  #eee);
}

From what I understand on this page: http://www.colorzilla.com/gradient-editor/ this should work… I can’t figure out where the blue is coming from. Using the IE developer toolbar if I deselect all styles that affect this element it still shows up looking like the image I’ve attached.

Does anyone have any suggestions on what could be causing this?

Answer 1

ColorZilla does not generate gradients with three-digit hexadecimal color values as they are interpreted differently within IE’s filters (in fact, I believe they’re invalid color strings). This discrepancy in your code is what’s causing your gradient to appear blue in IE.

You need to expand the hex colors to six digits for them to be interpreted correctly:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#eeeeee')";