SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Nov 8, 2007, 06:06 #1
- 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; }
-
Nov 8, 2007, 07:02 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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.
-
Nov 8, 2007, 08:39 #3
- 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
-
Nov 8, 2007, 08:41 #4
- 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?
-
Nov 8, 2007, 08:49 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Any other ideas?
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.
-
Nov 8, 2007, 08:58 #6
- Join Date
- Oct 2005
- Posts
- 415
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
check pm
-
Nov 8, 2007, 09:37 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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}
-
Nov 8, 2007, 09:42 #8
- Join Date
- Oct 2005
- Posts
- 415
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
fantastic...thank you very much paul....Much appreciated.
Bookmarks