Grow your CSS skills. Land your dream job.

IE Background RGB Bug

Published by Chris Coyier

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don't support it will get a solid color version:

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

The above works just fine, however Dan Beam alerted me to an interesting bug/quirk with this in IE 6 & 7 (fixed in IE 8). See example.

The situation is that the RGB fallback color only works when using shorthand. If you were to declare the fallback color like this:

div {
	background-color: rgb(255,0,0);
	background-color: rgba(255,0,0,0.5);
}

Using the background-color property only, it will fail and display no background color at all.


The above image is from IE 7. Using the shorthand (top) succeeds while the non-shorthand (bottom) fails.

Solution

Using RGB for a fallback is nice. It's no-brainer work because all you have to do is duplicated the RGBa value, remove the "a" and remove the 4th (opacity) parameter. If you want to keep using RGB as a fallback, just remember to set it using shorthand (if possible), or set the fallback using regular HEX codes or keywords.

In the example, the result of 50% red is a light red anyway, so using a hex code to specify that value might be a more appropriate fallback color anyway.

div {
  background-color: #fd7e7e;
  background-color: rgba(255,0,0,0.5);
}

Comments

  1. Interesting solution. Thx Chris :)

  2. Robert Uridge
    Permalink to comment#

    This was very timely. I was having this exact problem with a background set on a ul for my main page navigation. I was about to re-write all the CSS for the navigation when I stumbled upon this post.

    Thank you Chris!! Your site is a life saver!

  3. Ginger
    Permalink to comment#

    @Chris: So what’s new ? Does this enable transparancy though RGBa in one or more IE-versions ?

    Sorry, I didn’t get the thing entirely (I’m not a native speaker)

    Thx in advance

    • Permalink to comment#

      Unfortunately it doesn’t fix IE’s native rgba( ) or rgb( ) abilities, I wish that were the news. Although Sam’s comment may, haven’t tried it yet.

      However, this article is just letting you know that you using the “background-color:” command does not work as a fallback for rgb( ) color at all in IEs 6 & 7. Using “background-color: rgb( XX, XX, XX );” fails at the moment, and I don’t know why.

      Chris’ first article doesn’t use that, it uses simply “background:”, but I had other styles on the code I was working on and “background-color:” wasn’t working in IE 6 & 7. I was confused when they did not behave the same way (like Chris mentioned, “background:” would appear simply shorthand for all the “background-*” properties.

      Has anyone heard of a solution to this bug (other than conversion to hex, which is decidedly pretty simple anyways) or know why it exists?

  4. Eliazer
    Permalink to comment#

    Thanks, Its my first visit each morning….

    Thanks for the screen-casts i can watch them again and again.

    you are the guy.

  5. Permalink to comment#

    Solution for IEs:


    div {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#99FFFFFF);
    zoom: 1;
    }

    • Permalink to comment#

      btw., format in IE filter takes #AARRGGBB.

    • Don’t forget IE8 in “standards mode”.


      div {
      background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#BF6464B7,endColorStr=#BF6464B7);
      -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF6464B7,endColorstr=#BF6464B7)";
      zoom: 1;
      }

      My friend wrote about this a while back over here.

  6. bill
    Permalink to comment#

    IE you never fail to disappoint me.

    • Permalink to comment#

      IE you never fail to amaze me!

      By that I mean amaze me with how crappy it is.

    • Permalink to comment#

      Actually it supports RGBA since 5.5.

    • Permalink to comment#

      Sam, you fail to realize that no matter how much support it has for RGBA, that doesn’t make up for it being an all-around horrible browser.

      So, I think we can all agree that Internet Explorer is not a very good browser, until we have to stop wasting our time complaining and actually get some real work done :)

  7. What are the pro’s and con’s of using RGB/RGBa vs. hex? It was always my understanding to use hex when declaring the color of an element.

    • Grover
      Permalink to comment#

      AFAIK, there are none. It’s just another way of doing things. I think that everyone’s excitement about RGBA() (which gives you that sweet, sweet alpha ability) is just spilling over into RGB(), which really doesn’t have advantage over using a hex value.

      I too got the impression that all the cool kids were using RGB these days instead of hex and spent quite some time trying to figure out the advantage. And as far as I can see, there isn’t any.

  8. Permalink to comment#

    In HEX you can’t set alpha transparency.

    • Quinn
      Permalink to comment#

      That should be evident. I believe what Chris is stating here is that you will have to forego the transparency but preserve the color using the hex. Pretty standard workaround when considering IE all things considered.

    • Permalink to comment#

      “btw., format in IE filter takes #AARRGGBB.” what you said 3 comments up, haha, just thought it was funny

  9. Heh. I ran across this problem last week and found that this solution works. In my case though, I define the fallback solution for IE only by using conditional statements.

    • That might come back to bite you because rgba is not supported in older versions Firefox, Opera, etc. A fallback for all browsers is a good idea.

  10. Permalink to comment#

    It’s so strange it doesn’t work on IE. However this is not some strange CSS property that nobody use in practice. Maybe because the # notation is mostly used, the rgb() problem on IE is caught so late!

  11. IE is awesome!(using the new sarcasm exclamation mark)

  12. Colwyn
    Permalink to comment#

    All hail IE…its just a piece of crap, still roaming around the market

  13. Permalink to comment#

    Wow… great fix, I’ve been looking for a way to do have transparent divs with non-transparent content for a while… Thanks.

    (If only Internet Explorer would get up to standards already)

  14. Permalink to comment#

    Thanks Chris,

    That exact bug has been plaguing me for a few weeks now.

    LEGEND !!!!!!

  15. Unless you really need to keep using lighter colors all the time, I’d stick with hex codes. If you need lighter colors, just use a different hex code for that color.

  16. Michał Czernow
    Permalink to comment#

    I use additional step of graceful degradation – .png with some transparency, which emulates RGBA. So opaque color is shown only by IE6.

  17. Funny that you wrote this article yesterday and I’m just now reading it today. I had to tackle this problem on my own for a new site I’m working on. Here’s the solution I came up with:

    background:rgba(149,220,193,.4) !important; background-color:rgb(186,234,215);

    • The problem here is that you are using background-color and rgb, which is the combination that makes it fail in IE 6 and 7. Unless this seems to make it work for you?

    • It worked in IE7 for me. I didn’t test in IE6 though.

    • Yeah the word on the street is this indeed DOES work, which officially makes this bug 10 times weirder than it already is.

    • Permalink to comment#

      Yes, this ended up working without having to use background: command and write over all the other styles!

      Not exactly sure why a failed background-color: rgba( ) !important; makes subsequent background-color: rgb( ); calls work, but I’m ok with it, :D.

      Chris will probably put up an updated demo soon, but for now here’s one.

      Also, inheritance still works as the background-color: rgba( ) !important; call is completely ignored in IE6 (the browser that only accepts 1 !important on a rule and ignores the following ones).

      Here’s my final result:


      background-color:rgba(150,150,150,.5) !important;
      background-color:rgb(150,150,150);

      So, bravo for the hack with the most flexibility!

  18. Steve
    Permalink to comment#

    Presume ‘background-color’ works for all current browsers – including IE – so why need to fix ‘background’? Unless there’s something I’m missing here…which is likely! I know it’s shorter but does it make all that much difference?

    • Steve
      Permalink to comment#

      …and why have I only just discovered rgb in css? All this time I’ve been converting from rgb to get the hex!!! Great article, and thanks for opening my dull eyes!

    • The problem is, background-color doesn’t work properly in IE, only the shorthand, which is the point of this article.

  19. Euan
    Permalink to comment#


    function setOpacity(value) {
    exampleID.style.opacity = value/10;
    exampleID.style.filter = 'alpha(opacity=' + value*10 + ')';
    }

    A fix!

    Although:

    Explorer 6 makes the left margin misbehaves.
    Explorer 7 beta 3 two layers of text appear.

    TBODY & TR opacity are not accepted in Explorer 6, Explorer 7 beta 3, Safari 1.3, Opera 9

  20. Euan
    Permalink to comment#

    Explorer 6 makes the left margin misbehaves.
    Explorer 7 beta 3 two layers of text appear.

    This happens in css, not just my code javascript.

  21. “Using the background-color property only, it will fail and display no background color at all.”

    Why would use “background-color” anyway?

    You can just use the shorthand and that’s it. In other words, this:

    » background-color:#f00;

    Is the same as this:

    » background:#f00;

    Oh well…

    • Well using the shorthand RESETS other values that may already be set. So if you had set the background-image of an element (either with background-image or with shorthand), and then on :hover you changed the color with background: whatever;, the image would disappear. You would need to use background-color instead to ensure that the image didn’t get overridden.

  22. Thalaivan

    jquery css background-color change not working on Some div’s using Class Name to identify the div

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".