[jQuery] jQuery().hover() not working as intended in IE?

Wed, 07 Feb 2007 10:19:21 -0800 

Hello,

 

I am using the jQuery.hover() event binding to create drop down menus
from an unordered list.  I attempted to use the jdMenu plugin but the
positioning wasn't coming out right with the layout I am using (the
piefecta from http://www.positioniseverything.net/piefecta-rigid.html).
I decided it would be easier to "roll my own" than to dig through the
jdMenu code to figure out the issue.  

 

This was drop-dead simple to do using the .hover() event binding.  This
works wonderfully in FF.  Unfortunately, IE 6 has decided to be a
little...well you know how she is.  Mousing over the menu heading works
fine and the sub-menu appears underneath (as expected).  However, as I
move down, over the sub-menu, the sub-menu disappears (not supposed to
happen).  

 

I am attaching the source file (you may need to change the source path
location of jquery, I am using version 1.1.1).  Oh, ignore the content
of the page as it all pretty much a verbatim copy of piefecta layout ;-)

 

Thanks in advance,

-scott
Title: Menu test page

First in source

Second in
source

Here is a left float test box.

This column is floated and also negatively margined to the left, so it is "pulled" out of its container except for a single pixel that is kept within the container.

Italics can be justified as long as the paragraph gets the proper IE bug fixing, as described in the center col. This rigid layout makes such pixel control easy.

Here is a right float test box.

Tweaking the cols can be very confusing due the interlocked nature of the layout, but colored backgrounds on all divs can greatly help this process. Using borders to mark the divs will make them wider and cause float dropping.

Long left col demo

Third in
source

Here is a right float test box.

This column is floated, and then negatively margined to the right, pulling it nearly outside its container just like the left column.

Italics can be justified as long as the paragraph gets the proper IE bug fixing, as described in the center col. This rigid layout makes such pixel control easy.

The source contains a great deal of commentary on the code used in this layout. It's not for the squeamish, but even semi-skilled CSS coders will be able to wrangle this design to meet most site requirements.

Here is a left float test box.

This layout is known to work in: IE5/Win and up, Opera 6-7, Mozilla for both Win and Mac, IE/Mac, Safari, and Omniweb 5.

Long right col demo


Ribbet!

Here is an "absolute" box, which stays at the col bottom.

AP again. The side cols have bottom padding to avoid these boxes. 

_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/

Reply via email to