6 Replies Latest reply on May 26, 2010 8:48 AM by Chorale0001

    Z-Index Problem??

    amoncur Level 1

      Hi All,

       

      Admittedly, I've probably filled my quota of asking questions lately...thanks for all the community help!

       

      I'm so close to getting this done.  My problem now is that I've placed a Javascript navigation menu in a page with a jQuery picture gallery and the picture gallery seems to be on a "layer" that trumps that on which the navigation menu sits.  In other words, when I hover over my drop down menu, the sub-menus drop down but go "beneath" the image gallery (i.e. they are blocked by the image gallery and thus cannot be seen by the user).  I've tried making the Z-Index of pretty much all nav menu-related CSS 1001 (the image gallery is 0) but it still gets blocked.  Can anyone suggest a solution to this?

       

      The page can be viewed here:

       

      http://smallbusiness-webdesigner.com/chrisbarr/dev/aerial-photography

       

      Thanks so much for your help.  This site is killing me; I've never had this many problems pulling a page together :-)

        • 1. Re: Z-Index Problem??
          Chorale0001 Level 1

          Hello

           

          I see your probleme only in Firefox ( IE is fine ).

           

          As far as i am concerned you are right to use the z-index, however you shouldn't put that code inside your CSS because Firefox don't like that very much ( i had the same probleme previously on my own website ).

           

           

          The way i fixed that for me was to put all positionning information inside the <div> tag itself whenever i had to deal with the z-index.

           

          Exemple for my website.

           

           

          <div id="layer3" style=" position:absolute; left:50%; margin-left:-30px; top:61px; width:60px; height:60px; z-index:1">

           

           

          As far as i am concerned, each time i have to deal with the Z-index i really put the maximum inside the <div> tag even if i don't put any CSS at all for the Div. ( in my exemple i have a no CSS even if i did give a ID to the div. ) If you split them between the <div> and the CSS, you have a nice chance to confuse the browser giving some random result.

           

          Then i make a small CSS containing all typo information and tag the <table> itself with the CSS ID. and if you need multiple typo, then i make as much Css i need and tag them to the <TD> if require.

           

          It's the solution i found to workaround the z-index probleme with Firefox and it is compatible Chrome and IE, even if not the usual or suggested method.

           

          Hope this help you.

           

          Nice website Btw

           

          Message was edited by: Chorale0001

          • 2. Re: Z-Index Problem??
            Chorale0001 Level 1

            I also found 2 bug with your Left menu.

             

            1- When you go on your giant size photo and try to access the left menu, and then at a "normal" speed leave the menu by going toward the center of the photo and in diagonale, i manage to Bug the menu so it hide/show in a loop fashion and never stop.

             

            This seem to happen on IE. but not Firefox and Chrome.

             

            2- Same page but on all 3 browser, if you move your mouse on the edge of the detection zone of the left menu, just close enough to make the menu show itself, then quickly move out and back in and out and in a couple of time, you will stuck the menu in the loop forever.

             

            Keep up the good work man..

             

            Question : where were taken those photo ?

            • 3. Re: Z-Index Problem??
              amoncur Level 1

              Chorale, thank you very much for the suggestion.  I tried putting the z-index directly in the page's div tags, but it hasn't worked.  Thanks, anyway, though.

               

              Anyone else have any suggestions?

              • 4. Re: Z-Index Problem??
                Chorale0001 Level 1

                Hrm.. that's strange... Given that i have 4 layer of z-index on my page and everything work perfectly.

                 

                Did you try to put a z-index:50 Just to test ?

                • 5. Re: Z-Index Problem??
                  amoncur Level 1

                  I actually put a z-index of 1000

                  , and that still didn't work.
                  • 6. Re: Z-Index Problem??
                    Chorale0001 Level 1

                    Haha

                     

                    wait.. isn't there a limit to how many z-index you can put ? duh.. i don't know.

                     

                    Did you saw the 2 bug i found for you in one of my previous answer ? hope this help too