Internet Explorer hover LI bug solution

I spent about a half day beating my head against the Internet Explorer wall, and wanted to share my solution with you.

Problem: IE6 and IE7 wouldn’t properly handle a hover applied to an LI.

This manifested itself in a navigation menu that was supposed to expand when you did a mouseover.  When you pointed at the actual text inside the LI, the hover worked.  But when you pointed at the edge of the element where it was just blank space, the hover didn’t trigger in IE, but it did trigger in Firefox and Safari.

I know that IE doesn’t support the :hover pseudo element on non-a tags, but I’d already solved that issue.  I tried many solutions others listed: Adding a a proper doctype to avoid quirks mode.  Using the whatever htc behavior script, linked from the style sheet, to add hover behavior to all elements. Adding padding, even 0-width padding, to the LI.  Adding hasLayout properties to the LI. Redoing the menu to use jQuery instead of pure CSS and using the jQuery hover function instead of the CSS :hover.

Nothing worked.  Until I tried explicitly setting the width of the LI element that was supposed to be hovered over.  That finally solved it.  Apparently, IE has one “width” for displaying the LI on the page, and another “width” for calculating what the mouse is over.  Seems this would be even harder to code than to code it to work properly, but that’s Microsoft for you. So the solution is: add an explicit width to your element that needs the hover functionality.

Now pardon me while I go set fire a Windows Install CD to make myself feel better.


Have a Project for Us?

Request a Proposal