Strange bug in IE6 for jQuery Tab

Question

On this Page

http://www.eamobile.com/Web/mobile-games

In IE6 while we click on the Tab "Top iPhone Games , Top Mobile Games , Staff pics" the class is not changed in the IE6 and while click inside the tab content area its changed. while in FF and IE7 its works fine.

please let us know if you have some solution for this.

Answer 1

Issue

Your problem boils down to these two rules:

.topPicksTabs li a.topPicks1:active{
width:235px;
background-position:-238px -112px;
}

.topPicksTabs li.selected a.topPicks1{
background-position:-238px -168px;
}

The latter should override the former once a tab has been selected... however, the implementation of the :active pseudo-class in IE6 is quite buggy, allowing it to take precedence. The end result is the behavior you've observed, where a tab is displayed using the wrong background sprite so long as it has focus.

Workarounds

• Drop the pseudo-class in favor of mousedown + mouseup event handlers that add and remove another CSS class. Then modify your style to be triggered by that class instead of the pseudo-class.
• Alternately, do nothing. The bug does not affect the usability of the site, and as time goes on IE6 will continue to become less and less relevant.