Question

I have a simple div layer that shows only when certain logic is triggered.

To make it appear like a modal, I added a full screen div with opacity to give it the modal look.

Unfortunately, in IE6 – the overlay appears – but if I scroll down the page, the entire page isn’t covered by the overlay.
http://i53.tinypic.com/30wl2ye.jpg

Here’s my css:

.overlay {

    width:100%;
    height:100%;
    background-color: #333333;
    opacity: 0.25;
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    display:none;
    z-index:1000;
    *background:transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3F333333,endColorstr=#3F333333)"; /* IE8 */    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3F333333,endColorstr=#3F333333);   /* IE6 & 7 */
zoom:1;
}

.paymentPopup {
    background-color: white;
    border: 3px solid #6D8D4C;
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
    z-index: 99999!important;
    width:380px;
    display:none;
    float:left;
    position:fixed;
    *position: absolute;
    left: 33%;
    top:50%;

}

Answer 1

Sorry, IE6 does not support position:fixed;

There are some hacks for it (see http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/ for example), but the bottom line is you’re trying to do something the browser doesn’t support.