1

I tried to follow the advices in CSS: semi-transparent background, but not text. I'm happy of the results in Firefox, Safari, Opera and Chrome. With these browsers I obtain a result similar to the one below, where you can see the background in transparency under the header. However, I've problems with IE.

You should click here to see the jsfiddle.

Expected Result

In IE8 is OK, but in IE6/7 there is no colored band at all. Anyone knows how to fix it?

Community
  • 1
  • 1
stivlo
  • 83,644
  • 31
  • 142
  • 199
  • 1
    check out a similar question here - http://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8 – Antony Scott Jan 23 '12 at 16:09

1 Answers1

1

In div.header:

Remove:

background-color: #0a5787;
background: transparent;

Add:

background: none;
zoom: 1;

Change:

/* For IE 5.5-7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#900a5787, endColorstr=#900a5787);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#900a5787, endColorstr=#900a5787)";

This works on IE7 when I test it and in theory I'm sure it should work in IE6, but on my emulator it is not working.

JSFiddle: http://jsfiddle.net/3jEbC/

My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
  • 1
    In the meantime I tried the PNG trick http://jsfiddle.net/xhrAJ/10/ which works with IE7 and gives a full color in IE6. However your solution is PERFECT! It also works with IE6, you're awesome! Thank you! – stivlo Jan 23 '12 at 16:55
  • ah finally I understand that MS string like #900a5787, the first two hex digits are the transparency and the other 6 the color! – stivlo Jan 23 '12 at 17:03
  • @stivlo I believe the browser makes a call to the DirectX API which is why it is backwards. Check out this blog post: [How to use RGBA() in IE](http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/) – My Head Hurts Jan 23 '12 at 17:08