Suckerfish suckered in IE7

How to get them working again (handy tip)

[thesheep]

If you know Patrick Griffiths and Dan Webb's excellent method of getting :hover effects on elements other than anchor tags, you may have found problems when using IE7.

In IE7, I found that dropdown menus powered by this method were not closing with the onmouseout event.

After a process of elimination, it turns out that having TITLE attributes on the A tags is what causes the problem. So remove TITLE tags, and you'll be fine.

[Robin_reala]

Interesting. I found a completely different fix:

#menu li:hover, #menu li.over {
 position: static; /* make menus not sticky in IE7 */
}

[SuzyUK]

thinks thesheep, that's weird

my fix: I would feed the script to versions lt IE7 and let the CSS do the work for all the browsers it can, the same with any of these hover scripts really, i.e. start to filter them only for versions that need it

Suzy

[thesheep]

Interesting I will try the 'position: static' approach. It may be useful to retain the TITLE attributes I guess.

Suzy: I did wonder about that. I was thinking that IE7 should allow the :hover pseudo-class to be applied to LI elements so it wouldn't need the javascript. But when I removed the javascript from IE7, the dropdowns didn't work at all. But that doesn't seem right - maybe some stupid mistake on my part, I'll take another look.

[LunaC]

For getting son of suckerfish working in IE7 without needing the javascript, I found this:

*:first-child+html #nav {height: 1%;}
*:first-child+html #nav li {height: 1%;}

Seems to work fine and I haven't noticed any stickiness onmouseout.

On a side note, does anyone know which browsers require the javascript portion and which handle it with just css?

I only have access to a PC, so I know Opera, Firefox and IE7 (with that fix) handle it. What about Safari and other Mac browsers?