7 Replies Latest reply on Nov 23, 2010 11:51 PM by Rich Raposa

    the div is overcast

    ming li Newbie

      hello erveryone,I have meet a problem.the div is overcast,  I use the second levels menu .but when i move the mouse on the first levels menu,it's second levels menu is overcast by the content of jsp page ,please help me! thank you1.jpg

        • 1. Re: the div is overcast
          Amao Xu Newbie

          It should be controled by css attribute z-index.

          Either you should reset the content of jsp with z-index:0;

          or you reset the z-index for menu's class from .css of GateIn with biger number.

           

          (In this way, you may find the class name of Menu, try to find the css code in gatein.)

          • 2. Re: the div is overcast
            Rich Raposa Novice

            I had this exact problem just yesterday! I fixed it using Amao's second tip above: I applied the following CSS style to the portlet:

             

            .UIToolbarContainer .MenuItemContainer {
                z-index: 100;   
            }

            • 3. Re: the div is overcast
              ming li Newbie

              1.jpg i have find two styleSheet.css ,then i find .UIToolbarContainer .MenuItemContainer {} and add z-index: 100;    but ,no work!!! please help me!

              • 4. Re: the div is overcast
                Rich Raposa Novice

                I'm guessing the styles are being overridden by your Javascript code. Verify that your CSS styles are actually in effect using something like Firebug. Here are the steps specifically:

                 

                1. Write a new CSS file - for example, mystyles.css - that includes the following:

                .UIToolbarContainer .MenuItemContainer {
                    z-index: 100;   
                }

                 

                2. Override the doHeaders() method in your portlet class:

                public void doHeaders(RenderRequest request, RenderResponse response) {
                        Element css = response.createElement("link");
                        css.setAttribute("id", "mystyles_css");
                        css.setAttribute("type", "text/css");
                        css.setAttribute("rel", "stylesheet");
                        css.setAttribute("href", request.getContextPath() + "/mystyles.css");
                        response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, css);

                }

                 

                3. Make sure mystyles.css is in the root directory of your WAR, or modify the "href" attribute above accordingly, and deploy your WAR.

                 

                Like I said, make sure the styles in mystyles.css are taking precedence over any previous styles for .UIToolbarContainer and .MenuItemContainer. I suppose there also is the possibilty that 100 is not a big enough z-index.

                • 5. Re: the div is overcast
                  ming li Newbie

                  I'm very sorry.I have do it according to you say ,but no work too.I think it's the Explore porblem,because when i use the FireFox ,it no bug,but when i use the IE6,it have bug.

                  • 6. Re: the div is overcast
                    ming li Newbie

                    accroding to the test, I find in the IE6 have the bug ,IE8 and firefox don't have the bug.what a pity.I'm very disheartened

                    Who have any way??please help me.thank you

                    • 7. Re: the div is overcast
                      Rich Raposa Novice

                      It's a known issue with IE6. You can find some workarounds here:

                       

                      http://www.last-child.com/conflicting-z-index-in-ie6/