Geek asks and answers

IE8 error? div with height, position: absolute and opacity are not displayed correctly

I have a problem with CSS in IE8. The full height of .test_div is not displayed when I add opacity to #header. But the full height .test_div will show when I remove the opacity.

This works in Chrome and Firefox, but not in IE8. Am I doing something wrong?

Thank!:)

The code is also here: http://jsfiddle.net/VPkXu/

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <div id="header">
            <div class="test_div">test square</div>
        </div>
    </body>
</html>

CSS

#header {
    position:absolute;
    z-index:10;
    height:100px;
    width:300px;
    background: #888;
    /* remove the lines below, the full height of .test_div will be visible (IE8)*/
    opacity: 0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter:alpha(opacity=70);
}

.test_div {
    background:#CCC;
    height:500px;
    width:200px;
}
+3
source share
1 answer

The easiest way is to pull this div from inside #header

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <div id="header"></div>
        <div class="test_div">test square</div> 
    </body>
</html>

and apply position and z-index to .test_div

.test_div {
    z-index: 11;
    position:absolute;
}

see http://jsfiddle.net/7aXJD/

0
source

More articles:


All Articles