CSS: Removing class with visibility: hidden / position: absolute does not unhide in IE6/7

Question

I have the following CSS class:

.hidden {
    visibility: hidden;
    position: absolute;
}

I have div with that class on it. If I remove the class, the div doesn't show. But the second time I "remove it", the div shows. Any idea why? See a stand-alone example using YUI for this:

http://avernet.googlepages.com/ie-visibility.html (code also available on Pastie)

Note: I can't use display: none in my case (which otherwise would have worked).

Answer 1

It looks like it has to do with the "position:absolute;". If you remove that line it works, or if you add

div { position:absolute; }

it works as well.

Answer 2

do you mean display:none instead of visibility:hidden?

cheers

Answer 3

Using the nudge technique for IE does the trick. I added more information on this wiki: look for the heading Cell content remains hidden on IE .

And here is the implementation for the nudge that we are using in the Orbeon Forms code:

/**
 * Nudge element after a short delay for IE6/7 to force IE to "do the right thing".
 */
nudgeAferDelay: function(element) {
    if (YAHOO.env.ua.ie != 0 && YAHOO.env.ua.ie <= 7) {
        window.setTimeout(function() {
            element.className = element.className;
        }, ORBEON.util.Utils.getProperty(INTERNAL_SHORT_DELAY_PROPERTY));
    }
}