0

I'm having some problems to add opacity to IE 8 (I would also like this to work in IE7 and IE9 but I've just tested it on IE8).

I have my css as this:

label{
    color: #333;
    text-decoration: none;
    border: solid 1px #bebebe;
    width: 138px;
    padding: 5px;
    text-align: center;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px #333;
    box-shadow: 0 8px 6px -6px #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #f2f2f2;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#bdbdbd');
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#bdbdbd));
    background: -moz-linear-gradient(top,  #f2f2f2,  #bdbdbd); 
    display: inline-block;
    margin-bottom: 10px;
    position: relative;
    outline: none;
}

So all my labels must be the same in all explorers (This is working with no problem) but I wan to add a opacity to some of these labels. I was using:

.aclass{
    opacity:0.4;
    filter:alpha(opacity=40);
}

But it is not working on IE. I read some articles here, for example: Opacity CSS not working in IE8 , opacity in IE8 not working and others but I haven't found the solution for this. I tried adding this:

.aclass{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    opacity:0.4;
}

Also adding "zoom:1;" to the previous block or " display: block;" but still not working. I haven't found the solution to this, so if anyone could help me I would really appreciate it.

Thanks in advance!

Community
  • 1
  • 1
Tomarto
  • 2,755
  • 6
  • 27
  • 37
  • guessing around: you have to combine both filters in one statement `filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#bdbdbd') progid:DXImageTransform.Microsoft.Alpha(opacity=40);` – feeela Sep 11 '12 at 15:16
  • Does any of this work: http://www.quirksmode.org/css/opacity.html – Krycke Sep 11 '12 at 15:19
  • I tried to combine both filters like this: `.aclass{ opacity:0.4; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#bdbdbd') progid:DXImageTransform.Microsoft.Alpha(opacity=40); }` but didn't work. I also tried the ones on that page Krycke but with no success. – Tomarto Sep 11 '12 at 15:51

1 Answers1

0

In your gradient filter, you can define #AARRGGBB whereas the AA == alpha values. From MSDN. You might have better luck doing this than adding unique filters for gradient and alpha.

Scrimothy
  • 2,536
  • 14
  • 23