Suckerfish Layer Issue

Hi All,

Take a look at this in Firefox:
w (remove two spaces)

Move you mouse over the left nav. As you can see it works well. However, in IE8, there is a layer issue when you hover over any of the parent links. The parent link’s border line seems to overlap the sub-menu ul. Not sure why.

Another issue is the shopping cart in the upper right corner of the page. Just move your mouse slowly over to that area and you will see a popup window. Firefox, IE8, etc works well. However, there is a layer issue when you view it in IE7. The top nav seems to bleed thru the popup.

Any suggestions?

I was able to resolve the layer issue per your suggestion for IE8. However, IE7 is different story. To overcome this (overlapping) I bascially just positioned the flyout to be about 10 pixels to the right so that it’s perpendicular to those parent border.

I could have done as you suggested about defining z-index manually but this nav is being generated via ecommerce’s admin nav generator.

I was also able to overcome the shopping cart popup by reorganizing a small bit of css for the top grey bar menu.

Thanks for you help.

I’m not sure why you said it works well in FF, it actually renders the same as IE8.

The problem is the z-index:9999 on all the <li>s’

#left-menu  ul.sf-vertical li {

If you need your menu to layer above any other positioned elements on the page then set the z-index on the #left-menu or the parent ul.sf-vertical.

Your going to run into the IE6/7 z-index bug though with that overlapping menu though. If it was a small menu you could set your z-indexes manually but with all those links it would get out of control real quick.

This Example takes care of the IE z-index bug but it is a smaller menu like I mentioned.

I would think that it might be possible to have the js set the z-index for IE6/7 on the hovered states when it is needed but that is out of my territory.

If you want to keep things simple (while supporting IE6/7) then get rid of your overlaps. :wink: