Question

I wrote a script that when certain buttons are clicked on the webpage, the entire page gets greyed out until the user clicks either ‘yes’ or ‘no’. This seemed simple enough, but I’m running into conflicts with the menus that I am using from Superfish. The menus are still able to be accessed when the rest of the page is greyed out.

I troubleshot it down to the fact that the superfish css scripts use a series of

Position: relative

or

Position: absolute

So I figured that I will need to either figure out why my grey covering box isn’t working or hard code locations for my navbar into the source. My concern is that if I do that, then won’t the setup be only to my resolution?

Is there something that I missed on my grey box coding that would make this happen?

#cover {
            display:none;
            position:absolute;
            left:0px;
            top:0px;
            width:100%;
            height:100%;
            background:gray;
            filter:alpha(Opacity=50);
            opacity:0.5;
            -moz-opacity:0.5;
            -khtml-opacity:0.5
}

I don’t have much experience with css. I looked for a few hours for a solution yesterday, but couldn’t find anything related to the problem I am experiencing.

Thanks.

Answer 1

I ran into problems trying to use the setting below.

#cover {
        display:none;
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:gray;
        filter:alpha(Opacity=50);
        opacity:0.5;
        -moz-opacity:0.5;
        -khtml-opacity:0.5
        z-index:100
}

I figured out that z-index has to be set immediately after position is declared, or else it won’t work at all.

#cover {
        display:none;
        position:absolute;
        z-index:100
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:gray;
        filter:alpha(Opacity=50);
        opacity:0.5;
        -moz-opacity:0.5;
        -khtml-opacity:0.5
}