SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Classic IE: Drop-Downs Not Covering Form Elements

    I know this is a common problem, and I'm wondering if someone can point me in the right direction.

    I'm trying to create basic drop-down menus through CSS. But in IE7, form input boxes and select elements show through the menus. I've tried searching Google and the only answer I've found is "hide the form elements when you show the menus", which isn't an option.

    I know there's another option out there...the forum search kept timing out. Would anyone be kind enough to at least point me in the right direction?

    Thank you so much!!
    -Nate
    Nathan Rutman
    A slightly offbeat creative.

  2. #2
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you put this live on a temporary location or something? That would help alot.

  3. #3
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bah, it was a z-index issue. I mocked up a demo and it worked...until I realized that in my scenario the menu and the form were in separate <div> tags, and the form div tag had position: relative. I assigned position: relative in the demo and the problem was duplicated, but then when I assigned a z-index to the div tag with the menu, it rendered correctly again.

    I've attached my demo file. If you remove the style attribute from the top div, the problem will persist and the input boxes will show through the drop-down menus.

    Thanks for helping by asking questions. :-)

    -Nate
    Attached Files Attached Files
    Nathan Rutman
    A slightly offbeat creative.

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

    I'm not sure what you are asking now because you know what the problem is and how to solve it.

    Only positioned elements (relative,absolute,fixed) can have a z-index applied so you need to add position relative to static elements to make it obey the z-index.

    If the elements are children of different (positioned) parents then you need to address the parents z-index instead.

    In IE6 and under it still won't help you where select elements are concerned because they are stacked on top of everything and you need to use an iframe shim technique.

  5. #5
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for explaining. The problem was that initially I had no z-indexes at all...just relative positioned container divs. Firefox rendered the menu's correctly, but IE7 gave the second relative div higher placement than the first, which meant that the menus appeared underneath.

    I just posted the solution so that if anyone in the future had a problem, they could see it documented here.

    And thanks for the link to the iframe shim technique!

    -Nate
    Nathan Rutman
    A slightly offbeat creative.


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
  •