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?
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.