Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css3, html5 - possible z-index issue with Chrome & Opera (IE & Firefox work)

    Hi there and thanks for reading

    On my bird photography website I have a mixture of html, php, jQuery and css which has been added to over the past few years. Most things have been working fine but with the enhancement of browsers applying more css3 rules I'm now having an issue which I can't figure out - hence my plea for help.

    With the current versions of Firefox and IE, my pages display correctly as they have for the past few years but now with Chrome and Opera I'm getting what I think may be z-index issues.

    Taking a page such as Magnolia Warbler as an example...

    If you select the "US Birds A-Z" menu option from the top and select species beginning with B, in Chrome & Opera the image thumbnails overwrite the opened css menu and navigating to the lower menu options cause them to disappear. It works as expected in the other two browsers.

    I can't detect where the issue lies, if it's an html issue, css issue or some combination of those with the javascript.

    Any help would be greatly appreciated.

    Many thanks,
    Chris

    P.S. (Yes I know the css menu is a monster!)

  • #2
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    33
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Hello Ceeege, I see this has been here for a couple of days with no replies, so I figured I'd look into it. I went to the page you linked above and everything seems to be working for me. I have tried it on Google Chrome, both on Windows and Linux. I also tried Opera on Windows. The menu seems to be displaying just fine, unless I miss-understood you. Here is a screenshot.

    css3, html5 - possible z-index issue with Chrome & Opera (IE & Firefox work)-dropdownmenu.jpg
    The Game

  • #3
    New Coder
    Join Date
    Nov 2011
    Location
    ON, Canada
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I actually think your mega-menu is pretty nice. The 16x16's are a nice touch and the shadow and bevel for each listing on the lighter background comes together nicely. Maybe you could add a 1000ms grace period onmouseout where the menu opacity fades out instead of disappearing immediately. That way if the user accidentally steps outside of the boundaries she has a full second to mouse back in and not lose her spot in the menu.

    As for your issue...I'm not sure what it is because it looks perfect for me on all 5 up-to-date major browsers. Perhaps you were trying to view the menu before all the content was loaded and before all CSS rules were applied?
    sudo chmod / 000ps!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •