Posted by matt, Sun Jul 30 16:55:00 UTC 2006

So, we’ve got a pretty new client site that I finished work on this weekend, and I experienced the curse of all Mac-based web developers: you can’t test in IE. So, I’d been developing and testing in Firefox and Safari, all in XHTML 1.0 Strict, hoping that whatever I was doing wasn’t so whacky that I’d have problems later. Overall, the whole site was pretty straightforward…until the end.

The designer (our own Bill Edmonson) had designed some slick looking dropdown menus:

As you’ll notice, there’s some space between the menu items. I’m a big fan of suckerfish dropdowns, mainly because of the pretty markup, and also because they’re pretty easy to create. So, in this instance, all you need to do is add some margin to your LI’s to create the spacing between the nav elements.

This works brilliantly in all the standards-complient browsers (SCBs), because the transparent space between the items is still “contained” within the UL that is the subnav. Thus the onmouseout shouldn’t get fired in IE, because you’re over the menu even when you’re not over an individual item. In the SCBs, you’re still hovering the contents of the parent LI, so the menu will stay open.

No problem. Except that IE fires onmouseout prematurely, because it treats the lack of a background (the transparent space between the nav elements) as if it’s “punched out” of the parent UL. Thus, the menu closes as soon as your mouse wanders over one of the gaps, which you will immediately do as soon as you try to select anything but the top element.

The solution? A transparent GIF background on the parent UL. Thus, a menu with the following html:

  
Menu Item 1
  
Menu Item 2
     

       
Sub Item 1
       
Sub Item 2
     
  

Would have the following background to eliminate the problem, excluding all of the usual suckerfish stuff, which can be had at ALA:

  ul#nav ul { background: url(/images/common/spacer.gif) };

This has the effect of filling the background, but it’s still transparent, so you still get the desired effect. However, IE treats the element as if it were “opaque”, instead of “punched out”. Thus, onmouseout only fires when it should, and not when you mouseover one of the gaps.

Filed Under: Design | Tags: css suckerfish