To fix this in IE7 will require a “safe CSS hack” for IE7 and lower. You can pretty much guarantee rgba to be supported in all major browsers so I would write the CSS like so:

color: rgb(255, 255, 255);
color: rgba(255, 255, 255, 0.5);
*color: rgb(255, 255, 255); // IE7 and older

Unfortunately you need to declare rgb twice. Since IE8 works fine with the current solution. If you’re not too concerned with IE9 having transparent text you can use the \9 hack.

color: rgba(255, 255, 255, 0.5);
color: rgb(255, 255, 255)\9; // IE9 and older

That reduces the redundancy but excludes IE9 from using rgba which it supports.

I have found that applying transparency to text suffers the same problem as “background-color”. If I have
color: rgb(255, 255, 255);
color: rgba(255, 255, 255, 0.5);
IE7 ignores both lines and uses parent definitions
IE8 user the fallback
IE9 user rgba
Any idea how to fix this for IE7?

If you’re looking to add transparency to IE8 and down you can use MS’s filter property to do it and you won’t need an image.

background-color: transparent;
background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6–IE9 
    zoom: 1;

You can easily generate the filter CSS needed by going to css3please.com and editing the rgba value there and it will update the filter value to match it.

In your article, you have stated the background-color properties in the wrong sequence. It should be RGB first and then RGBA. All browsers read the RGB, and the ones that are able will replace it with the RGBA.

Unfortunately, there is another problem. IE, our whimsical friend for some reason messes this up too, and will show a blank background. Instead, if you use only the background property instead of background-color, it will work properly – as Mark, in the comment before says.

You should edit the article to reflect that, or some frustrated beginner might end up spending a lot of time troubleshooting.

Vidyut

You are entirely right concerning rgb/rgba, using:

div
{
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}

…works perfectly.

What I mean is, if I put background-color:rgb() AFTER background-color:rgba(), it will clobber the transparency in all browsers. But if I put rgb() BEFORE rgba(), IE ends up not appling a background color AT ALL, and of course the rgba statement applies normally in Firefox.

If this is true, then we have no choice but to ALWAYS use a conditional stylesheet to reapply a background color in IE browsers every time we want to use RGBA!!!