Z-Index problem with drop down menus in Firefox 2
Posted on January 11, 2009 | 4 Comments | No TrackBacks
I spent several hours this week troubleshooting an obscure Firefox 2 issue so I'm posting it here in case anyone else has the same problem.
Like many people I use the Suckerfish method for creating dropdown menus in my web projects. I've used it on dozens of sites over the last couple of years without any problems until a few days ago. I had a new site, setup the way I normally do. The site worked fine in every browser I tested in except for Firefox 2, even IE6 worked fine. The problem in Firefox 2 was that my dropdown menus would appear underneath and obscured by all of the content below them.
My first thought was to check the position and z-index attributes on all of the elements but that did nothing to solve the problem. After several hours of Google searching and some good old trial and error I finally nailed the issue down. On the "header" div tag, which contained the dropdown nav, there was an extraneous "overflow: hidden;" attribute. I use overflow: hidden on container elements to clear floats but in this case I didn't actually need it. Removing that attribute instantly fixed the problem.
I'm not entirely sure why Firefox 2 choked on this attribute when every other browser rendered things just fine... but if you run into a similar issue check the overflow elements first. You may find the problem there.
"even IE6 worked fine. " - wow, not often you get to say that!
I had exactly the same problem which I was able to fix after reading this post - lovely jubbly!
Many Thanks.
thanks! yikes, couldn't figure that one out at all. this totally fixed the bug.
thanks a lot for your comment here.
i had the same problem and searched over hours for a solution. now it works wonderful.