- This topic is empty.
July 25, 2010 at 3:03 pm #29724
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://18.104.22.168/test/permanent/index.html
Both the CSS and the XHTML validate also.
– BryanJuly 26, 2010 at 4:08 am #80374jamygoldenMember
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-indexesJuly 26, 2010 at 8:46 am #80384
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.
BryanJuly 26, 2010 at 8:53 am #80385
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.
– BryanJuly 26, 2010 at 9:34 am #80386
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.