An Unfinished Symphony

It's about the internet and stuff.

Z-index Oddities: Menu dropdowns overlapped by positioned elements

I use the Suckerfish Dropdowns menu quite often when building large sites and rarely have too many problems with it. However, on one of the sites I'm currently working on there have been quite a few odd bugs – though I should stress that I don't think it's specifically an issue with Suckerfish, rather with nested dropdown menus (that use absolute positioned elements within floated ones) in general.

The most common issue found with this kind of menu is that, in Internet Explorer, relative positioned elements located below the menu on a page will overlap the dropdowns, obscuring them and preventing access to the links as a result. The normal solution for this, and the one most commonly suggested, would be to use a higher z-index on the dropdown ULs. On this occasion, though, increasing the z-index of nested lists within the dropdown menu didn't have any effect – not even when setting ridiculously high z-indexes, nor when also specifically setting a lower one on the positioned element. In the end I was compelled to remove positioning from all elements where I could without it affecting anything else.

That appeared to do the trick, until it was noticed that the issue was still present on some pages of the site despite relative positioning not being involved. After further investigation I discovered that the bug was limited to data tables containing links. Though, as mentioned above, there was no positioning involved. Despite that I kept my efforts to fix the issue focused on positioning and decided to test how various positioning properties affected things. I began, and ended, with static positioning (the default) by targeting all links within tables with the following CSS:

  1. table a { position : static; }

Adding that to the bottom of my IE only style sheets fixed the issue. Thankfully! Unfortunately, things are never quite that simple where IE is concerned and I found that my fix broke an image rollover system used on 2 pages, preventing the images from displaying when the links where moused-over. To try to fix this I set all links in those 2 tables to use absolute positioning which, initially, seemed to work in this case. However, more thorough testing showed that while it fixed it for links above the page fold; all those below the fold would either vanish on mouseover or reposition themselves at the top of the table. Testing with all variations of positioning and link state proved fruitless. In the end the only answer was to fix the menu issue, and consequently the disappearing link issue, leaving IE 6 users without the thumbnail view (the use of zoom: 1; haslayout fix had no effect). Sometimes sacrifices have to be made to ensure a website remains usable for its visitors, no matter how much the site owner wants a given feature to be added.

Up arrow

Comments on 'Z-index Oddities: Menu dropdowns overlapped by positioned elements'

RSS feed for comments on this post.

gravatar
Andy Cole says:

Thanks for the articles I used a suckerfish menu in a similar way which was being overlapped by H1's with backgrounds. This article saved me a lot of time in figuring out what was causing this.

Many thanks

gravatar

No problem Andy, I'm glad it helped.

Sorry, the comment form is closed at this time.