Grey out CSS Superfish menus

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.

score 0 · Answer 1 · answered Aug 09 '12 at 15:05

0

You need to set menu block z-index lower then overlay block z-index.

.someClass
{ 
    position: relative; 
    z-index: 2; 
}

answered Aug 09 '12 at 15:05

Edward Ruchevits

6,411
12
51
86

I must be missing something. I assigned my #cover{z-index: 200} and assigned the rest of the classes a value of {z-index: 2} and I'm still having the same problem. – pr- Aug 09 '12 at 15:11

score 0 · Accepted Answer · answered Aug 15 '12 at 15:58

0

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
}

answered Aug 15 '12 at 15:58

pr-

402
2
9
18

That's rather odd. I never heard of the position of a CSS rule inside of the same selector block being important, unless there's two identical rules. In that case, the later would obviously replace the former. I would have to believe that while this could be solving the issue, there's something else that's actually causing it. Would it be possible to past a real simple jsFiddle that shows this 'bug' in action and how your solution fixes it? I'd love to play around with it. My first guess is that `filter` is doing something. Have you tried moving `z-index` just before and after `filter`? – jmbertucci Aug 15 '12 at 16:30
@jmbertucci The problem that I was running into is kind of hard to replicate. The areas being greyed out correctly were all html items. The parts that weren't getting greyed out were fancy java menus with hover-over options. When I stripped the menus down to their base, the cover overlay worked. If I added almost any functionality, they didn't work again. I moved the z-index everywhere, it only had a problem being at the very end of the list of attributes. I created a quick fiddle with the core of my programs. For some reason, the program won't work. http://jsfiddle.net/qJhDS/1/ – pr- Aug 15 '12 at 17:22
thanks for the Fiddle! I'm going to play around with it. I'm familiar with the Suckfish tutorial which is also why I'm confused as to this odd bug. Is this happening in all browsers too? – jmbertucci Aug 15 '12 at 18:29
@jmbertucci Yeah, I tested this in IE,Firefox,Chrome and on linux and windows on each. I even tried using a different javascript menu and yielded the same results. So, its not isolated to just superfish. – pr- Aug 15 '12 at 18:31

Grey out CSS Superfish menus

2 Answers2