SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2005
    Posts
    609
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with zIndex of DIV on Greyed Out Screen

    Hi All,

    I'm using the GreyedOut function available here:
    http://www.hunlock.com/blogs/Snippet...Out_The_Screen

    I then create a hidden div and have a function that first calls the function from that snippet above and then shows my hidden DIV and sets the zIndex property to 51 (1 higher than the greyed out div). The problem is that with IE it shows on top and the "screen" and the controls within the new div are available, but with FireFox the div that should be on top (because it has a zIndex of 51) is below the darkened div. Both DIVs are position:absolute.

    I've tried setting the zIndex of the darkened div to 1 and the "on top" div to 99 (not that I thought that would work, I was just a bit frusterated and was trying anything) and I also set the z-index in the style tag of the div instead of javascript just to make sure it was definitely set. Lastly, I setup my function to alert the zIndex property of both DIVs to make sure that they were accurate, they were.Can anyone think of anything I might be missing here or another path to try?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The z-index of elements is ultimately controlled by the parent with the highest z-index. Are any of your divs inside a parent (or ancestor that has a z-index set). If so you would need to address the z-index of the parent of each to make sure one is on top of the other.

    I'm guessing the issue is probably something else though if you are seeing it ok in IE.

    We might need to see more code or a link to the page in question.

  3. #3
    SitePoint Guru
    Join Date
    Jul 2005
    Posts
    609
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for the place to start

    The main content of my page is inside of a DIV that does not have a position or a zIndex set. However, If I remove the content part of the page from inside the div, everything works great. If I set the positioning on the content div to absolute, it throws everything else off so I think I'm going to try and futze around with it for a bit to see if I can make this work without a ton of redesign.

    I'll post back some code when I get stuck - but feel free to throw in any suggestions in the mean time

    Chris.

  4. #4
    SitePoint Guru
    Join Date
    Jul 2005
    Posts
    609
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, first thing that came to mind worked Resolved by moving the DIV that's supposed to be on top out of the content DIV so that it wasn't affected by its parents zIndex and voila!

    Thanks a ton for your help, Paul.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Glad you sorted it


Bookmarks

Posting Permissions

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