3

I want to design a box with some transparency in it in CSS or CSS3 which must work in IE8, I made this code, it is working fine in other browsers, but in IE8 the box is becoming completely transparent, how to fix this problem?

.price_tag {
    position: absolute;
    height: 146px;
    width: 295px;
    left: 210px;
    top: 241px;
    background-color: rgba(221, 221, 221, 0.7);
    border-radius: 8px;
    z-index: 200;

    -webkit-box-shadow: -2px -2px 6px rgba(255,255,255, 1) inset, 2px 0px 4px rgba(255,255,255,1) inset;

    box-shadow: -2px -2px 6px rgba(255,255,255, 1) inset, 2px 0px 4px rgba(255,255,255,1) inset;

    behavior: url(pie/PIE.htc); 
}
Ankit Popli
  • 2,809
  • 3
  • 37
  • 61
Akshat
  • 479
  • 4
  • 9
  • possible duplicate of [CSS background opacity with rgba not working in IE 8](http://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8) –  Nov 18 '13 at 07:31
  • `rgba()` is not supported in IE8. –  Nov 18 '13 at 07:31

2 Answers2

1

rgba is not supported in IE8, for fallback tricks, this might be helpful
http://css-tricks.com/rgba-browser-support/

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
1

You have to "hack" the opacity effect in IE8.

One way to do this is by using a 1x1 transparent png with:

background-image: url(<path to your url>);

Another way is by using ms-filters:

opacity : 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);

But with last one there is an inconvenient. All the selector will be "alphaed" to 0.7. So you shall put your content (text, images, whatever...) in another container.

Jonas Zamora
  • 36
  • 2