CODEWITHSUNDEEP
htmlcssinternet-explorer-7colorsfallback
Misha Moroshko
Misha Moroshko

Reputation: 171351

color IE fallback for rgba() does not work

Why the following fallback for IE color: red; does not work ?
In IE7, the color is black rather than red.
Live demo here

HTML:

<div>
    <span>Hello</span>
</div>

CSS:

div {
    width: 200px;
    height: 100px;
    background-color: blue;
    text-align: center;
}
span {
    font-size: 2em;
    color: red;
    color: rgba(250, 250, 97, 0.9);
}

3rd party edit

The mozilla mdn on css color lists the different options for color: value

Upvotes: 11

Views: 12526

Answers (2)

thenickdude
thenickdude

Reputation: 1660

Splitting those two color declarations into separate CSS rulesets cures this problem:

span {
    font-size: 2em;
    color: red;
}
span {
    color: rgba(250, 250, 97, 0.9);
}

Now IE gets red text, better browsers get the RGBA declaration.

Upvotes: 5

SamGoody
SamGoody

Reputation: 14468

RGBA is not supported in IE.

However, as it sees your color: style, it attempts to evaluate it and reverts to the default color (#00000000). You could use an IE specific hack here, such as

*color: red;

But, assuming that you are trying to affect only the background color, and not the opacity of the entire element, you're best off with a filter that sets the desired rgba value as the start and end color of a gradient - creating an rgba background.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

But remember - IE assumes that the Alpha is first, not last, so don't just convert and copy your values. The double filter is for IE6 and IE7 respectively.

http://css-tricks.com/rgba-browser-support/

Upvotes: 11

Related Questions