SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown Nav Problem...bodytext overlapping

    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

    HTML Code:
    #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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check pm

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Try adding a wrapper div around the header and the nav (including the drop down) and give it this style:

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

  8. #8
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fantastic...thank you very much paul....Much appreciated.


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
  •