text input boxes affected by overlap over underlying div. can anyone help?

Discussion in 'CSS' started by LordXenu, Mar 17, 2008.

  1. #1
    hello, i got this problem with text inputs contained within an overlapping div here. i tried layering the divs with z-index, but it doesn't seem to work for me. i have two 50% width divs side by side, with a central fixed width div hovering centered above them. inside this div i have 3 text input boxes, but for some reason i can't drop the cursor into the text inputs unless i move the bottom two divs back out of the way by decreasing the width percentages of the underlying divs. anyone have any idea what i can do to fix this? i tried using the z-index property to layer the divs, but it didn't appear to do much to change the cursor over the text input issue.
     
    LordXenu, Mar 17, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Any reason why you need to have a third div absolutely positioned over two others? I'm sure there's another way to make the same effect which might be safer.

    Plus IE has a nice z-index bug that could show in this instance.

    You could maybe kinda sorta do this if you MUST have this set-up:

    Have the two 50% divs (hopefully they're like 49.9% or something cause you know our good friend IE can add 50% and 50% and get like 101%) like they are, and underneath (so, next in source) have the middle div centered the usual way (margin: 0 auto; ) and then make the top margin negative until the div is visually sitting over the other two divs. So, margin: -50px auto 0 auto; or something. Give it a nice z-index too for extra luck.

    Are the two 50%ers floats by any chance?
     
    Stomme poes, Mar 18, 2008 IP