I’ve been playing around with CSS3 a lot lately and as always, IE6 is a major pain in the ass!
I was using the new RGBA property and noticed that IE totally ignores it. The colour displayed this way is non-existent.
The fix
So I began experimenting.
I noticed that, when the standard RGB or Hexidecimal value is placed in the CSS as well, IE uses that value to display the colour.
But depending on the stacking order, depends how more standards compliant browsers display the colour.
If the RGBA value is first and the RGB value second.
e.g.
background: rgba(255, 255, 255, 0.5);
background: rgb(255, 255, 255);
All browsers display the RGB colour.
However.
If the RGBA value is second.
e.g.
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.5);
Safari/Chrome & Firefox will display the RGBA colour whilst IE displays the RGB colour.
That’s a nice neat little fix. Hope you find it useful.
Liam - October 21, 2009
Little confused here.
IE does not read rgba transperncy for a start.
background: rgba(255, 255, 255, 0.5);
background: rgb(255, 255, 255);
Will prevent all browsers from applying a transparency because you have decalred a non transparent background after the other because css renders down. What comes after overides the previous.
All you did there was overide it.
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.5);
Gets transparency because you have given the item a new background property with transparency.
if you want it to render and not mind IE not having the transparency all you need to do is…
background: rgba(255, 255, 255, 0.5);
IE will render the colour fine.
Jonny Haynes - October 22, 2009
I know, that’s the point of this article.
I know, that’s what this article says.
If you were to just use the RGBA property with no actual solid colour, be it RGB or Hex. IE won’t display anything. It totally ignores the line altogether. IE doesn’t recognise the RGBA property, it doesn’t figure out it can ignore the last value.
To use RGBA and get IE to see the colour you need to follow what I suggested in my article.
Geng Gao - October 25, 2009
Let’s give up IE6 already!
Great tip by the way.