Why does this CSS gradient show up with the wrong colours in IE 7?

Question

So I am trying to put a gradient background on a table, via a class:

.prov-results-bkgrd {
    background: #fff url(/_images/prov-results-table-bg.jpg) left bottom repeat-x;

    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fff),
        to(#dedbd5)
    );

    background: -moz-linear-gradient(top, #fff, #dedbd5);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#dedbd5');
}

IE8 and FireFox look OK. They apply the gradients as I thought: from white, to a light beige.

However, IE7 applies the gradient from black to a dark blue??? WTF is up with that...?

Where would that come from? Does IE7 not recognize the hex colors?

And if it didn’t, wouldn’t it apply the default background, i.e. #fff and the image file??

Answer 1

Have you tried with #ffffffff instead of #fff and #ffdedbd5 instead of #dedbd5 for the gradient filter (ie7) ?

You must specified alpha value I think http://msdn.microsoft.com/en-us/library/ms532929(v=vs.85).aspx

Answer 2

IE does recognize hex colors, but not the kind you're using. Only those with 6 hexadecimals (#RRGGBB) or 8 hexadecimals (#AARRGGBB; only works in the gradient filter!) will work. It will also accept named colors.

So it will work if you replace the #fff by white or #ffffff (or #ffffffff, but that's longer than necessary in this case).

The MSDN pages for startColorStr and endColorStr also note that the default start color is blue, and the default end color is black, and:

String input that is outside the hexidecimal range will revert to the default value.