Son of Suckerfish issue in ie6

[bpalmer]

I’m in the process of redesigning one of our websites, and am using the Son of Suckerfish menu for my navigation. In a nutshell, it works great in all browsers I’ve tested so far (IE8, Firefox, Opera, Chrome), but it’s not displaying in IE6.

The html is in a standard set of nested unordered lists. All the styling is done and looks great on the browsers that work right. All the list items, and sublist items, are all using a standard image replacement via css. In IE6 however, the submenu doesn’t pop up.

A preview of the site can be seen here: http://12.238.98.132/test/permanent/index.html

My best guess is that it’s somehow a z-index issue in IE6. I read somewhere that IE6 resets z-index values in some cases, ignoring what you have in the style sheets. I’m assuming the sfhover attribute is actually being applied to my list items via the javascript code. I don’t know anything about javascript, so not sure of a way to check it out or not to see if it’s being applied to my list items or not, however as I said it’s working in all the other browsers.

Both the CSS and the XHTML validate also.

Any suggestions?

– Bryan

[jamygolden]

http://css-tricks.com/forums/viewtopic.php?f=2&t=8493
Try putting ‘z-index: 100’ on your #navigationmenu and ‘z-index: -1’ on your #navigationmenu with an IE 6 only stylesheet. IE6 seems to hate positive z-indexes

[bpalmer]

I tried doing that after reading the post you linked and your suggestion. Still not having any luck.

If I return the text elements by switching out the text-indent: -9999em; with text-indent:0px; on the #navigationmenu ul li in the ie6/7 stylesheet, the menus will pop up when moused over in IE6.

Is there any thing else I should check? I wish there was a way to know the javascript was firing and applying the sfhover class to the li elements when mousing over them.

http://12.238.98.132/test/permanent/floorplans.html

Thanks,
Bryan

[bpalmer]

Hmm, ok, found something else out that clues me in to something here.

I knew if I restored the text-indent, popup menus came back. I wanted to see if shifting them over 100px was moving my "click detection" area over also. Turns out it doesn’t move the hit detection hotspot of the menu, however my actual popup menus were shifted 100px to the left. This explains why my popup menus aren’t displaying. They actually are, but -9999em offscreen.

So now I need to find out how to get the popup menu shifted back into the right position, with the parent li text shifted left offscreen.

– Bryan

[bpalmer]

Ok, here’s what finally fixed it for me.

Son of Suckerfish uses left:-9999em to hide the submenu, and left:auto to restore it. Uses auto because of an issue with Opera. I ended up creating an ie6/7 specific stylesheet that just uses left:0px; to restore the submenu instead of auto. Seems that when I used left:auto, ie6 was shifting the absolutely positioned submenu all the way over to whereever I had my text-indent set to.

That seems to have fixed it for me now. There’s only 1 little residual issue with this fix. I have my navigation bar set as a div 980px wide, absolutely positioned. Inside that div, my UL#Navlist is positioned relatively. The list elements are positioned absolutely with respect to the parent UL, with each one receiving top, left, and width properties. The minor issue is that because there is empty spacing between some of these menu blocks, mousing over the empty spots between menu items seems to make the first dropdown menu pop up. The spaces are relatively small, and IE6 only makes up about 8 percent of our visitors over the last year, so I’m not gonna worry too much about this at this point.

– Bryan

[Author]

Posts