Question

Can someone tell me what I’m doing wrong here? The inner class ‘tab’ is supposed to have a negative top margin but when the -ms-filter:Alpha(opacity=40); gets applied, the container seems to have a overflow:hidden forced.

Remember this is only happening in IE8. Here is the fiddle:

http://jsfiddle.net/ANh4k/2/

Please let me know if there is more information I can provide, and thank you in advance.

UPDATE this is a screenshot using IE8 developer tools, I’ve unchecked as many options as possible to try to figure out what is causing the opacity problem (keep in mind, -ms-filter:... does not show in the IE8 CSS developer list; but it is applied).

Answer 1

got rid of the z-index in the fiddle.. that z-index confuses IE8, and it believes that you don’t want overflow when you have it.. That is IE for you…

http://jsfiddle.net/ANh4k/40/

  #feed-container-outline.mini.active {
        display:block;
        position:absolute;
        zoom:1;
        right:5px;
        top:45px;
        width:370px;
        height:53%;
        min-height:320px;
        background:#ED9A27;
        opacity:.4;
        border:2px solid #F16719;
        -moz-box-shadow:1px 1px 3px #aaa;
        -webkit-box-shadow:1px 1px 3px #aaa;
        -o-box-shadow:1px 1px 3px #aaa;
        box-shadow:1px 1px 3px #aaa;
        overflow:visible;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
}


 #feed-container-outline.mini.active .tab {
        display:block;
        overflow:auto;
        position:absolute;
        float:right;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        width:70px;
        right:-1px;
        top:-45px;
        height:45px;
        background:#ED9A27;
        border:2px solid #F16719;
        border-bottom: 0px;
}​