z-index order in Google Chrome

[KeredDrahcir]

I have a box that need to display when the user clicks on a link. I want the background to grey out while the box is active. I found some code to do this using main CSS and little bit of JavaScript.

<div class="black_overlay" id="fade">
    &nbsp;</div>

<div style="text-align: center; clear: both;">
    <a href="javascript:void(0)" onclick="document.getElementById('light1').style.display='block';document.getElementById('fade').style.display='block'"><img alt="" border="0" height="228" src="/images/myuimage.jpg" width="225" /></a>

<div class="white_content" id="light1" style="bacground-color: transparent;">
<a href="javascript:void(0)" onclick="document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'"><img alt="Close" border="0" src="/images/close.png" style="position: absolute; right: 0px;" /></a>
 my content
</div>
 

 
.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 567px;
    height: 507px;
    text-align: center;
    padding: 0;
    z-index:1002;
    overflow: auto;
}

I've got no problems in all browsers expect Google Chrome. In Google Chrome, the black appears above the white box even though the white box comes after the black in the code and has a higher z-index.