0

I have a div with its individual CSS for IE8, it is transparent. How can I prevent IE8 from making content inside this div also transparent? It should be 100% visible and not transparent. Thanks so much for suggestions.

Fiddle (to be watched at in IE8)

.mybox {
    position: absolute;
    top: 362px;
    left: 0;
    width: 460px;
    height:94px;
    overflow: hidden;
    text-align: left;
    padding-left: 10px;
    padding-top: 3px;
    overflow:hidden;
    background-color:#000000;
    /* background: transparent;  */
    -ms-filter: "alpha(opacity=60)"; 
    /* zoom:1 ; */
    /*  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";   */
    /*  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
    /*filter: alpha(opacity=60);*/
}

OT: Ok I know this is kind of old school. But still my customer wants this page to be compatible with IE8.

Related resources:

Community
  • 1
  • 1
nilsole
  • 1,663
  • 2
  • 12
  • 28

3 Answers3

1

Opacity in inherited to all children, by design. New browsers can use alpha-channel (RGBA) to get around this, IE8 cannot.

All you can really do is use absolute-positioning to place the content you want visible over-top of the transparent bits. You of course need to rearrange the element stacking order to do this.

You can cheat by making a copy of the contents, minus the transparent element, and placing it over top of the existing element using JS.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
0

If the div has the class called .mybox then try and definitively set the opacity perhaps by adding opacity: 1;

Brendan
  • 1,399
  • 1
  • 12
  • 18
0

Finally, I found an even better solution:

.mybox { 
background:none transparent scroll repeat 0 0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#98000000,endColorStr=#98000000);
}

UPDATED: Take a look with IE8

I obviously messed up something with the filter declaration, I am sorry about that... :(

nilsole
  • 1,663
  • 2
  • 12
  • 28
  • Ok, now it's about the markup context obviously. If you look at the **div with the class "teaserContentWrap_largeie8"**, the transparency is ok here: [Link1](http://www.nilsole.net/else/dw_mit17/mytest2.html) - But not here: [Link2](http://www.nilsole.net/else/dw_mit17/?http://www.nilsole.net/else/dw_mit17/showcases/newtest.json&de#) ... Any ideas @Diodeus ? Thanks so much. Screenshot: [why not transparent?](http://www.nilsole.net/else/dw_mit17/why.png) – nilsole Apr 25 '14 at 23:22
  • Well in the end, I took a 60% transparent black png file. Works with IE8. – nilsole Apr 26 '14 at 15:33