IE7 will not remove active state from navigation until hover

Question

The site is http://greenvillenext.com/site (NOTE: please ignore the crazy load times and everything, I already know).

Here's what's going on: clicking an item in the main navigation (the five links across the top) gives that item a class of "active" and when you click a different one it removes the active class from that one and adds it to the new one. Obviously, this active class is used to style the nav link to let you know where you are.

However, in IE7, clicking on a different link in the nav doesn't remove the active style from the previously active link until you hover over it, which seems to reset it.

I'm at a loss here. I've tried any kind of peek-a-boo hack that I could find (min-width: 0 for example), I've set an 'inactive' class to non-active links and styled that differently, etc. Nothing seems to make it reset until you hover over it in IE7.

Any ideas?

Answer 1

How are you defining the hover? The easiest (and most reliable way), is to use jQuery.

$('.myNav').hover( function(){

$('.myNav').removeAttr //remove whatever styling hover causes
$(this).css //set the background/do hover animation

});

You would need a way to flag the currently selected tab and ignore it; you could always use some attribute on the elements to flag such. I see that your nav elements are all different classes; I'd add another class to all of them for easy grouping.

To all the jQuery naysayers: he's already using jQuery-UI, so the addition of the jQuery plugin is a moot issue. This will be more readable and probably efficient than any homerolled solution.

Answer 2

Turns out, it was the fact that the designer had enabled DD_belatedPNG for all versions of IE instead of just IE6, and that was the culprit.