IE7, CSS dropdowns and hasLayout


Finally being able to use :hover on elements other than anchors has meant less of the IE6 style Javascript faking it. Among my favorites to :hover: buttons and dropdowns. I’m not a fan of dropdowns* but a lot of the sites I end up building are so looking forward to eventually being able to drop the JS is nice. Recently though a particular layout cause havoc on getting the dropdowns to work in IE7 using just CSS.

The set up

I tried recreating it, but ended up not getting the exact behavior as the troubled layout. It used background images for the main nav items though as well as a background image on the dropdowns so perhaps that was part of the deadly combination. The rest of the markup in question involved a relatively positioned div containing the absolutely positioned nav ul with its nested dropdowns.

Quirk 1

At first IE7 testing, the dropdowns would appear fine but didn’t go away as expected. If moving the cursor off the bottom of the nav or into the adjacent nav item with the previous dropdown still appearing would cause it to lock itself into position. You could move the pointer anywhere on the screen at this point an the dropdown would just chill there.

Removing CSS rule after rule, I found falling back to a pure Javascript solution rather than using :hover solved the problem. Great. Except not really. Cause this is 2007. Eventually I found that the containing div‘s position: relative was at the root of the trouble. Considering the rest of the layout was pretty much dependent on it for positioning, removing wasn’t an option. More trial and error. Removing the set width of the nav ul fixed it. Almost.

Quirk 2

Everything seemed happy. The dropdowns appeared as intended and vanished properly. Well, except if the user clicked anywhere in the viewport. The nav’s dropdowns would work fine on first load of the page. Their habit of lingering around was squelched. However, click somewhere –: on an image, on text to highlight it, etc. – and then try using the nav and the same sticky behavior returned. Brilliant.

Usually my solution to IE issues is adding position: relative; to elements until the bug disappears. Not this time. The next culprit tends to be that mysterious hasLayout business. I’m unsure how the dropdowns could have layout before the page is clicked on and then lose it with a mouse click, but going through the usual hasLayout tests fixed it. Assigning height: auto; magically made the dropdowns work properly in IE7, regardless of rogue page clicks.

* Don’t expect this to mean they will never show up here…


  1. puddingcups 20070118

    really?? whatever all that means. where are all the people commenting here?? where did they all go?? that’s what i want to know.

  2. waytoocrowded 20070118

    No one told you? Commenting here is so 2006.

  3. puddingcups 20070126

    no one told me…. how come i’m always the last to know?? huh?? anoyone. one…one…one… (echo)

Skateboards and bikes are better at nights

Skateboards and bikes are better at nights. 0 comments.

Search WayTooCrowded
The Header Should Always Point Home