March 11, 2005

Back Drop

Here's a bit of an oddity with IE I've found.

If you take a look at the CSS drop-down menu demo you'll see I've added a second top-level item. This item's submenus have no background color. (Actually, the color is set to transparent to counter a higher-level CSS background-color definition.)

Now try using those menus with IE. The first top-level item and its menus will work fine. Now try the second top-level menu item. Try hovering over the third/bottom "level three" link. You probably won't get your mouse over it before the menu disappears. Those with really fast hands might be able to pull it off.

So it would seem that the simple act of adding a background color can drastically change how an element is handled by IE. This isn't a hasLayout* hack issue, this is something different.

My guess is that IE allows mouse events to be passed to any object(s) below a transparent object. So when you mouse over any area of those list items that isn't a border or text will trigger IE to pass the mouse's position and any rollover events to any objects below the menu. By having these events pass to another object, I believe a mouse-out event is triggered on the menu, thus losing the :hover state and making the menus collapse.

This is a bit frustrating, but once you're aware of the bug, you can easily work around it.

Other Drop-Down Menu Issues

You'll note in the various layouts that I use a horizontal menu based on unordered lists, I make the list elements inline elements rather than block or list-item. I take this approach, rather than using floats, so that the list functions as expected (or as best as can be) in IE 4 and IE 5.0, where floating the list-items don't work as well.

The downside to this is that drop-down menus off those elements don't work so well. Opera simply doesn't display them as if the :hover state is ignored. IE seems to set the drop-downs as having a z-index of -9 million, as they appear under the text of the main content/column, rendering them unusable.

So I'll have to play around with that a bit and see what alternatives there are. I've wanted to take the time to re-invent my list-based menus anyways, and this looks to be as good a time as any.

-----
* My new name for the hack formerly known as holly. hasLayout is a property in IE that, when set to TRUE for an object in an HTML document, fixes a bunch of IE rendering bugs.

Posted by Ruthsarian at 01:44 PM | Comments (3)

Comments

I like your site. I have a question about your drop down list. Have you checked whether the problem is due to the item appearing below the ? I wrote a menu with javascript and a problem sometimes arose when the cursor went below the line, into some kind of object below. Just an idea, keep up the good work. Posted by: Matthew Lee at April 28, 2005 07:35 AM
I've noticed the same behavior you mention, when dealing with transparent objects in IE. In my case, I've got a div wrapped around another div, with the outer one being transparent and merely supplying some invisible padding, so that the inner one appears to be bigger when dealing with onmouseover events. And in IE, it's a pain. What do you suggest as a way to work around this problem? Posted by: Joe Loveland at June 30, 2005 11:10 AM
I have recently encountered this problem. Solution was rather simple - transparent background image (well-known spacer.gif :)). You'll have transparent background and IE will fire "hover" event properly. ps. Rather late comment, but maybe someone still need this solution... Posted by: Filthy_Pervert at October 25, 2005 12:48 PM

Post a comment










Code:
Type Code:

Remember personal info?