JQuery / IE/ CSS bug. HELP!
Posted: Sat Sep 18, 2010 3:58 pm
Hello All,
I've officially wasted WAY too much time on this bug and I am officially out of idea. I am trying to build a jquery powered custom menu for a customer and it works perfectly in FF and Chrome, but it has a very noticeable bug in IE7. I don't have IE8 installed on this computer, so I'm not sure how it acts in that.
Here's the link:
http://www.nhhealthykids.com/New/
In IE, hover over any of the second or third level links and you will see that the menu momentarily disappears and then reappears, giving it a horrible flashing effect.
Here's a snippet of the HTML code:
[text]
<ul id="nav">
<li style="padding: 0px 8px 0px 8px;">
<a href="http://www.nhhealthykids.com/New/about-us-who.we.are">
<div class="MenuDiv">
About Us
</div>
</a>
<ul class='SecondLevel'>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about-us-who.we.are">
Who We Are
</a>
</li>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about- ... on.history">
Mission / History
</a>
</li>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about-us-employment">
Employment
</a>
</li>
</ul>
</li>
</ul>
[/text]
And here is the suspect JQuery code
[text]
if ($(this).parent('ul').hasClass('SecondLevel')) {
$(this).hover(function(){
$(this).toggleClass('SecondLevelHover');
});
}
[/text]
By adding/removing that "SecondLevelHover" class, I am simply changing the background image. Nothing else.
I've done a ton of testing and I have narrowed the issue down to the following, whenever I use javascript (Either JQuery or old fashioned code) to change ANYTHING visual about the second level li that is being hovered over, it gives this bug.
So, some examples of things I have tried:
This one causes the same bug
[text]
$(this).bind('mouseout',function() {
$(this).toggleClass('SecondLevelHover');
}
[/text]
This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).removeClass('SecondLevelHover');
}
[/text]
This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).css({'background':'Images/Background.jpg'});
}
[/text]
This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).css({'background':'blue'});
}
[/text]
And here is the crazy one, this also causes the bug:
[text]
<li class="SecondLevelLI" onmouseover="this.className='SecondLevelHover';" onmouseout="this.className='SecondLevelLI';">
[/text]
One interesting test though is that this bit of code did NOT cause the bug:
[text]
$(this).hover(function(){
$(this).attr('rel','Test');
});
[/text]
which leads me to believe that any change I make that doesn't change visual properties of the LI will not cause a issue.
I've tried several other things like having a different function for each half of the hover function, splitting it up into "mouseover/mouseout" functions, using addClass/removeClass instead of toggleClass etc... and nothing helps.
Anyone have any ideas?
Any and all help is appreciated.
I've officially wasted WAY too much time on this bug and I am officially out of idea. I am trying to build a jquery powered custom menu for a customer and it works perfectly in FF and Chrome, but it has a very noticeable bug in IE7. I don't have IE8 installed on this computer, so I'm not sure how it acts in that.
Here's the link:
http://www.nhhealthykids.com/New/
In IE, hover over any of the second or third level links and you will see that the menu momentarily disappears and then reappears, giving it a horrible flashing effect.
Here's a snippet of the HTML code:
[text]
<ul id="nav">
<li style="padding: 0px 8px 0px 8px;">
<a href="http://www.nhhealthykids.com/New/about-us-who.we.are">
<div class="MenuDiv">
About Us
</div>
</a>
<ul class='SecondLevel'>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about-us-who.we.are">
Who We Are
</a>
</li>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about- ... on.history">
Mission / History
</a>
</li>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about-us-employment">
Employment
</a>
</li>
</ul>
</li>
</ul>
[/text]
And here is the suspect JQuery code
[text]
if ($(this).parent('ul').hasClass('SecondLevel')) {
$(this).hover(function(){
$(this).toggleClass('SecondLevelHover');
});
}
[/text]
By adding/removing that "SecondLevelHover" class, I am simply changing the background image. Nothing else.
I've done a ton of testing and I have narrowed the issue down to the following, whenever I use javascript (Either JQuery or old fashioned code) to change ANYTHING visual about the second level li that is being hovered over, it gives this bug.
So, some examples of things I have tried:
This one causes the same bug
[text]
$(this).bind('mouseout',function() {
$(this).toggleClass('SecondLevelHover');
}
[/text]
This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).removeClass('SecondLevelHover');
}
[/text]
This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).css({'background':'Images/Background.jpg'});
}
[/text]
This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).css({'background':'blue'});
}
[/text]
And here is the crazy one, this also causes the bug:
[text]
<li class="SecondLevelLI" onmouseover="this.className='SecondLevelHover';" onmouseout="this.className='SecondLevelLI';">
[/text]
One interesting test though is that this bit of code did NOT cause the bug:
[text]
$(this).hover(function(){
$(this).attr('rel','Test');
});
[/text]
which leads me to believe that any change I make that doesn't change visual properties of the LI will not cause a issue.
I've tried several other things like having a different function for each half of the hover function, splitting it up into "mouseover/mouseout" functions, using addClass/removeClass instead of toggleClass etc... and nothing helps.
Anyone have any ideas?
Any and all help is appreciated.