Comments on: Suckerfish Dropdown navigation going behind content http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/ Fri, 21 Nov 2008 21:49:44 +0000 http://wordpress.org/?v=2.6.3 By: Steve http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-591471 Steve Wed, 20 Aug 2008 08:46:04 +0000 http://www.scriptygoddess.com/?p=1516#comment-591471 Just learned yesterday that in IE, if the dropdowns are in one section that is position:relative, and the area where they are to display is in another position:relative section, that the dropdowns display behind the content in the second section. I was able to resolve this by combining both sections into one so the whole thing was in one position:relative . After doing so it works fine. My original attempt worked fine in FF. It was IE (as usual) that was the problem. This resolved the IE problem. Just learned yesterday that in IE, if the dropdowns are in one section that is position:relative, and the area where they are to display is in another position:relative section, that the dropdowns display behind the content in the second section.

I was able to resolve this by combining both sections into one so the whole thing was in one position:relative . After doing so it works fine.

My original attempt worked fine in FF. It was IE (as usual) that was the problem. This resolved the IE problem.

]]> By: Jennifer http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-584960 Jennifer Wed, 16 Jul 2008 14:48:05 +0000 http://www.scriptygoddess.com/?p=1516#comment-584960 For some reason the second example has stopped working entirely. :/ Not sure why. At some point I'll get around to cycling back to this issue to fix the examples. For some reason the second example has stopped working entirely. :/ Not sure why. At some point I'll get around to cycling back to this issue to fix the examples.

]]> By: Kerry http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-584954 Kerry Wed, 16 Jul 2008 14:05:33 +0000 http://www.scriptygoddess.com/?p=1516#comment-584954 I was having the same problem, hours and hours spent trying to fix it, to the point I was almost in tears! By removing the "position: relative;" from the CSS under the "#content-wrap" absolutley worked a treat and now my drop-down suckerfish menu works sits above the main content. So simple, and yet so very very effective. THANK YOU SO SO VERY MUCH Total Star! :-) I was having the same problem, hours and hours spent trying to fix it, to the point I was almost in tears!

By removing the "position: relative;" from the CSS under the "#content-wrap" absolutley worked a treat and now my drop-down suckerfish menu works sits above the main content.

So simple, and yet so very very effective.

THANK YOU SO SO VERY MUCH

Total Star! :-)

]]> By: lucas http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-574135 lucas Sun, 18 May 2008 03:16:50 +0000 http://www.scriptygoddess.com/?p=1516#comment-574135 i generaly do a div{position: relative;} at the very begining of my css files so that if i have any absolutely positioned divs they don't screw up and be positioned absolutely in the page..... it also takes care of z-indexing.... i generaly do a div{position: relative;} at the very begining of my css files so that if i have any absolutely positioned divs they don't screw up and be positioned absolutely in the page….. it also takes care of z-indexing….

]]> By: Jennifer http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-571893 Jennifer Tue, 06 May 2008 16:50:14 +0000 http://www.scriptygoddess.com/?p=1516#comment-571893 And now I'm also hearing from some people that one of the pages where that navigation lives is plauged with a "sticky hover" problem. I'm still working on resolving it - but going to save this link here for (my) future reference. http://www.satzansatz.de/cssd/pseudocss.html#stickyhover And now I'm also hearing from some people that one of the pages where that navigation lives is plauged with a "sticky hover" problem. I'm still working on resolving it - but going to save this link here for (my) future reference.

http://www.satzansatz.de/cssd/pseudocss.html#stickyhover

]]> By: Jennifer http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-571817 Jennifer Tue, 06 May 2008 14:33:40 +0000 http://www.scriptygoddess.com/?p=1516#comment-571817 I know in the case most recently - where I had to specifically add "position: static" to the tag itself - that adding z-index to the embeded UL didn't make a difference. (This is why I hate working with other people's code/layout) - but good to know for the future - if I *have to* make the next div position: relative - that I should start working with z-index to fix the navigation issue... I know in the case most recently - where I had to specifically add "position: static" to the tag itself - that adding z-index to the embeded UL didn't make a difference. (This is why I hate working with other people's code/layout) - but good to know for the future - if I *have to* make the next div position: relative - that I should start working with z-index to fix the navigation issue…

]]> By: Emily http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-571746 Emily Tue, 06 May 2008 12:21:49 +0000 http://www.scriptygoddess.com/?p=1516#comment-571746 More of an explanation now that I've had some coffee and a shower: z-index: 10 on #nav li ul will pop the menu forward. Absolute positioning takes the element out of the flow of the document. So elements that come after are stacked on top of the absolutely positioned one. Z-index gives a weight to elements and the higher the number the more to the top of the stack the element is. All elements have a default z-index of 1 (it's actually the z-index of the parent element but unless it is set somewhere, it is 1). Z-index can only be specified on elements that have position specified. Are you using Firebug (the firefox add-on)? It makes debugging the css so much easier. More of an explanation now that I've had some coffee and a shower:

z-index: 10 on #nav li ul will pop the menu forward.

Absolute positioning takes the element out of the flow of the document. So elements that come after are stacked on top of the absolutely positioned one.

Z-index gives a weight to elements and the higher the number the more to the top of the stack the element is.

All elements have a default z-index of 1 (it's actually the z-index of the parent element but unless it is set somewhere, it is 1). Z-index can only be specified on elements that have position specified.

Are you using Firebug (the firefox add-on)? It makes debugging the css so much easier.

]]> By: Emily http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-571702 Emily Tue, 06 May 2008 10:45:01 +0000 http://www.scriptygoddess.com/?p=1516#comment-571702 z-index: 10 on #nav li ul will pop the menu forward. Are you using Firebug (the firefox add-on)? It make debugging the css so much easier. z-index: 10 on #nav li ul will pop the menu forward.

Are you using Firebug (the firefox add-on)? It make debugging the css so much easier.

]]> By: lucas http://www.scriptygoddess.com/archives/2008/05/03/suckerfish-dropdown-navigation-going-behind-content/#comment-570941 lucas Mon, 05 May 2008 04:15:02 +0000 http://www.scriptygoddess.com/?p=1516#comment-570941 try setting the div's z-index to a value of like 30 or something really high.... try setting the div's z-index to a value of like 30 or something really high….

]]>