need help in css ie6 issue

Question

I am using a css lightbox to display a newsletter subscription feature. The popup works fine in all browsers except IE 6 - the black_overlay - background color and opacity are not displaying.

The style I`m using for the popup display is listed below:

    .black_overlay{
        position: relative;
        top: 0px;
        left: 0px;
        width: 400px;
        height: 300px;
       min-height: 900px;
       height:auto !important;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80); }

         .white_content {
        display:none;
        position: relative;
        top: 100px;
        left: 50px;
        width: 500px;
        height: 300px;
        min-height: 400px;
        height:auto !important;
        padding: 16px;
        border: 16px solid #999;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }

One more item: I am using javascript to display a popup. Will this display block work on IE 6? I am not able to test on IE6, since IE8 is been installed in my system.

document.getElementById('newsletter').style.display='block';

       <div id="newsletter" class="white_content"></div>
      <div id="fade" class="black_overlay" ></div>

Answer 1

For the overlay in ie6 you need to take 15x15px transparent gif as overlay and need to repeat in background as overlay rather then opacity that will work for you :-). and for hack in ie6 you need to add hack. For example height:20x; this thing will work only for ie6