jQuery click class change IE weirdness

Question

I may be trying to get too fancy on this one.

I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.

I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.

For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.

This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.

The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?

It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?

Answer 1

I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.

Answer 2

I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):

if ($("html").hasClass("ie7")){
    var tempHolder = $("#ajaxresults").html();
    $("#ajaxresults").html(tempHolder);
}

As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:

    if ($.browser.msie){
        if ($.browser.version < 8){
            $("html").addClass("ie ie7");
        }
        else {
            $("html").addClass("ie");
        }
    }