Results 1 to 6 of 6

Thread: CSS pop ups - always on top help

  1. #1
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS pop ups - always on top help

    Believe it or not, I just learned how to do CSS roll over pop ups. How this escaped me for so long I don't know.

    But I need help with a attribute. When the link is rolled over the "window" is displaying partially underneath an image on the page. This is probably a simple thing but i have no idea how to code it to always be on top. Help?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That depends. If the overlapping image is simply an image and is either absolutely or relatively positioned (sometimes, in some browsers, even if it is not), what you need to do is give your pop up a higher z-index in its style, ex:

    HTML Code:
    <img src="whatever.jpg" style="z-index:1000;">
    Depending upon the stacking order of the page, even a z-index of 1 might be enough. Go for the lowest value that works.

    If the overlapping image is in an iframe or is flash, other methods must be used and success is not 100% guaranteed.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much. It didn't work, even when set at 1000. I'm sure I have it wrong.

    The link that contains the rollover pop up is in an include file that is the sidebar navigation. When rolled over, a window pops up as it should. However, in the main page, there is an image that is displayed simply with the '<img src="whatever.jpg">'. But this image is "on top" when the rollover window pops up. The window ends up half underneath it.

    It doesn't make sense that these windows would pop up under images on the page so I'm sure i've done something very wrong.

    Thanks for your help!

  4. #4
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    In case anyone wants to look, it's on
    http://www.law.stetson.edu/conferences/

    Rollover the February 17 conference on the left titled Primer on Bankruptcy, second conference from the bottom.

    You'll see the little pop up go underneath the image in the center of the page.

    Again, the menu is an include file, if that matters.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I misunderstood you so gave misleading advice. The z-index should be applied to the pop up, not to the image.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well I wasn't very clear.

    Thanks for trying. I just moved it to where it pops up below the sidebar, but before I can use this in future pages, I need to figure out what I'm doing wrong.

    I really appreciate your effort! Thanks again.

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
  •