why color IE fallback for rgba() does not work ?

[moroshko]

Hello !

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);
}

Thanks a lot !!

[macneato]

Why don't you just use hexadecimal.

E.g.

span {
 color: #ff0000
}

NB:
RGBa is only suppported by Mozilla Firefox 3.x (and up), Google Chrome, Safari 3.x (and up), Opera 10.x and IE9. If you do decide to use it, ensure you have a fallback.

[moroshko]

color: #ff000000; does not work as well. Check this in IE7: http://jsfiddle.net/JryG2/11/

[macgurl70]

take out the rgba... it is not a specialized color code, it only includes an alpha channel that is not needed for viewing. The only time you would have an alpha channel is in an image - since those are added channels that are not required but help with image manipulation (such as color and selections).

There is a definition of it on Microsoft's website, however there is no need for it when creating a website. And even in their definition they state "The number of bits for each component varies depends on the pixel format." You won't be dealing with pixels in any text designations on a website.

Stick with the traditional rgb model and change the designations back to the six value number.

Note: this is also irrelevant for print as well - since items are printed in CMYK even if you submit RGB files.

[macgurl70]

OK, I have to take back one thing - I now see where the "alpha" is used in images and some html items for transparency after looking up information for a different work project.

From what I can tell, using the information from w3schools - you have the syntax wrong. However, the way you have it specified - is not right. You have it where it is statedas a customized color - when it is a filter to allow for image transparency.

You are not to specify a specific color with this command - similar to its use in Photoshop it is used to specify the opacity of the image in the browser.

Information from Mozilla

It explains in more detail that it is not part of the color specification - but part of the style itself. You don't add the values to the end of the color specification. So...

div {
    width: 200px;
    height: 100px;
    background-color: blue;
    text-align: center;
}
span {
    font-size: 2em;
    color: red;
    color: #fafa61;
    opacity: 0.5;
    -ms-filter: "alpha(opacity-50)";
    filter: alpha(opacity-50);
}

The above will give you an image/element that has an opacity of 50% when viewing. Also, use the hexidecimal code for rgb colors or they are not recognized.

Sorry for my lack of alpha understanding - I am not used to that in coding.
}