Dropdown Nav Problem...bodytext overlapping

[enormousrodent]

Hi there,

I have a problem with a dropdown navigation, but the problem is very specific. When i use the dropdown if there is text which is being generated by php and placed in an input box, it appears ontop of the dropdown nav.

Standard html body text does not do this..

Any ideas?



dropdown css

#navbar ul
{
        margin-left:0;
        margin-top:1px;
        margin-bottom:0;
        list-style-type:none;
        text-align:left;
        padding:0 17px;
}

#navbar li
{
        display:inline;
        margin:0;
}

#navbar li a
{

        text-decoration:none;
        padding-left:17px;
        padding-right:17px;
        padding-bottom:5px;
        margin-right:3px;
        color:#fff;
        font:9pt Trebuchet MS, verdana, arial, sans-serif;
        font-weight:700;
}


#navbar a:hover{
color: #cccccc;
}

#navbar li.selected a
{
        border-bottom-color:#FFF;
}
.dropmenudiv_b
{
        position:absolute;
        top:0;
        color:#fff;
        font:9pt Trebuchet MS, verdana, arial, sans-serif;
        font-weight:700;
        line-height:18px;
        z-index:1000;
        margin-top:0px;
        margin-left:17px;
        visibility:hidden;
        border:1px solid #FFF;
        background:green;
        border-width:0 1px;
}

.dropmenudiv_b a
{
        width:auto;
        display:block;
        text-indent:5px;
        border:0 solid #fff;
        border-bottom-width:1px;
        text-decoration:none;
        color:#fff;
        padding: 2px 5px 2px 0px;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #22bf22;
color: #fff;
}

Thank you in advance

[Paul O'B]

Does this happen in all browsers or just one?

Do you have a live example?

I assume you've tried the usual z-index methods etc (apply a lower z-index to the element containing the inputs). It sounds like that when the input is populated dynamically it gets brought to the front which is much like the drop down part of a select box that is always at the front.

If z-index doesn't cure it then you might have some luck with an iframe shim technique (google "iframe shim" for more examples). The example I posted is set up for IE6 (and under) only as that's the browser that has issues with select.

[enormousrodent]

Hi Paul,

Far as i know it only happens in Firefox. Tried IE6 and all seems well. not tried ie7 though. Ill have alook at the iframe shim technique..it sounds complex...im sure its not..but hopefully not too much work..

thanks...If you think you still need a live example (ill not place it on here) msg me and i can provide you with a login area

Thanks

[enormousrodent]

Just re-read your msg. Im guessing that since IE is working that the iframe shim will do nothing to help my firefox issue.

Any other ideas?

[Paul O'B]

Any other ideas?

If Ie6 is working then its probably not a z-index issue and I doubt whether the iframe method would make a difference.

Sounds like it may be some browser behavior caused by the dynamic data that can't be controlled.

PM me a login link etc and I'll see if I can try some things on the live site using the web dev toolbar.

[enormousrodent]

check pm

[Paul O'B]

Try adding a wrapper div around the header and the nav (including the drop down) and give it this style:

#wrap {position:relative;z-index:999}

[enormousrodent]

fantastic...thank you very much paul....Much appreciated.