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

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

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
p
{mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman";}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Great!  I appreciate your time on this immensely! 
Let me know when you have the fixes in place and I can try it on my side.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Thanks again,<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>-scott<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div style='border:none;border-left:solid blue 1.5pt;padding:0in 0in 0in 4.0pt'>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Jonathan Sharp
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, February 07, 2007
2:39 PM
<b><span style='font-weight:bold'>To:</span></b> jQuery Discussion.
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery]
jQuery().hover() not working as intended in IE?</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Hi Scott,<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>I was able to duplicate this and have isolated it to some changes
that took place in the dimensions plugin around the 1.1.1. I'm going to handle
positioning differently in the new version which should address these issues. <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Cheers,<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>-js<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
 <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><span class=gmailquote><font size=3 face="Times New Roman"><span
style='font-size:12.0pt'>On 2/7/07, <b><span style='font-weight:bold'>Weaver,
Scott</span></b> <<a href="mailto:weavers@ugs.com">weavers@ugs.com</a>>
wrote:</span></font></span> <o:p></o:p>
<div vlink=blue link=blue>
<div>

<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'>Hi Jonathan,</span></font><o:p></o:p>


<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'>In a nutshell, the drop down menu was positioned waaaay to
the right.  What you can do is just rename the existing menu class from
"ugsMenu" to "jd_menu" and change the $(document).ready()
to invoke the jdMenu plugin as opposed to mine.  Hopefully, this should
give you an idea of what I encountered.  I used the base, jdMenu.css to
test it.</span></font><o:p></o:p>






<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'>Thanks for the help,</span></font><o:p></o:p>


<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'>-scott</span></font><o:p></o:p>


<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'> </span></font><o:p></o:p>


<div style='border:none;border-left:solid blue 1.5pt;padding:0in 0in 0in 4.0pt'>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center>
</span></font></div>

<b><font size=2 face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma;
font-weight:bold'>From:</span></font></b><font size=2 face=Tahoma><span
style='font-size:10.0pt;font-family:Tahoma'> <a
href="mailto:discuss-bounces@jquery.com" target="_blank">discuss-bounces@jquery.com</a>
[mailto:<a href="mailto:discuss-bounces@jquery.com" target="_blank">discuss-bounces@jquery.com</a>]
<b><span style='font-weight:bold'>On Behalf Of </span></b>Jonathan Sharp
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, February 07, 2007
1:22 PM
<b><span style='font-weight:bold'>To:</span></b> jQuery Discussion.
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery]
jQuery().hover() not working as intended in IE?</span></font><o:p></o:p>










</div>
<div><span id="q_1109d88805a15d2a_1">

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'> <o:p></o:p></span></font>


<div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'>Hi Scott,<o:p></o:p></span></font>


</div>
<div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'> <o:p></o:p></span></font>


</div>
<div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'>I've
developed the jdMenu plugin and am working on an updated version of it. What
positioning problems were you running into? Do you have a demo page somewhere? <o:p></o:p></span></font>


</div>
<div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'> <o:p></o:p></span></font>


</div>
<div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'>Cheers,<o:p></o:p></span></font>


</div>
<div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'>-Jonathan
 <o:p></o:p></span></font>


</div>
<div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'>On
2/7/07, <b><span style='font-weight:bold'>Weaver, Scott</span></b> <<a
href="mailto:weavers@ugs.com" target="_blank"> weavers@ugs.com</a>> wrote: <o:p></o:p></span></font>


<div vlink=purple link=blue>
<div>

<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'>Hello,</span></font><o:p></o:p>


<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'> </span></font><o:p></o:p>


<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'>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 <a
href="http://www.positioniseverything.net/piefecta-rigid.html" target="_blank">http://www.positioniseverything.net/piefecta-rigid.html</a>).
 I decided it would be easier to "roll my own" than to dig
through the jdMenu code to figure out the issue.  </span></font><o:p></o:p>






<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'> </span></font><o:p></o:p>


<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'>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).  </span></font><o:p></o:p>





<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'> </span></font><o:p></o:p>


<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'>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 ;-) </span></font><o:p></o:p>



<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'> </span></font><o:p></o:p>


<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'>Thanks
in advance,</span></font><o:p></o:p>


<font size=2 face=Arial><span style='font-size:10.0pt;font-family:Arial'>-scott</span></font><o:p></o:p>


</div>
</div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'>
_______________________________________________
jQuery mailing list
<a href="mailto:discuss@jquery.com" target="_blank">discuss@jquery.com</a>
<a href="http://jquery.com/discuss/" target="_blank">http://jquery.com/discuss/</a>
<br clear=all>
<o:p></o:p></span></font>






</div>

<font size=3 face="Times New Roman"><span style='font-size:12.0pt'> <o:p></o:p></span></font>


</div>
</div>
</div>
</div>
</span>
<p class=MsoNormal style='margin-bottom:12.0pt'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
_______________________________________________
jQuery mailing list
<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
<a href="http://jquery.com/discuss/" target="_blank">http://jquery.com/discuss/</a><o:p></o:p></span></font>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
</div>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/