jQuery - IE6 .hide() doesn't hide until I hover over

I’m trying to hide fields when I reopen a form and of course it works in all browsers except IE6. Why do I even care about IE6? I mean it’s 2012! Unfortunately, that’s what the client wants and has paid extra to get it to work there.

Anyways, I hide a section of a table (using jquery selectors on tbody elements) when I open the form in a dialog window. I have verified in both IE6 and other browsers that the elements needing to be hidden both have the style=“display: none;” attribute. All browsers except IE6 properly hide these elements. IE6 waits until you hover over them or change screens to refresh the view and properly hide the elements. It does not partially hide the elements I am trying to hide. Even when I hover, the entire element that needs to be hidden disappears.

I tried a little hack by using .focus() on one of the hidden elements on the form, then immediately changing focus back to where it needs to be at the start of the form. This solves the issue of having to hover over any content to hide it, but is not quick enough to not see the hidden content for about a second. I know this is not a computer speed issue for me (I have 4 GB of RAM).

Can you provide a link to the page that exhibits this behavior. I did a search on google for “jquery ie6 hide()” and all problems seem to stem from an id attribute being used multiple times, which is invalid.

I’m pretty certain there are no duplicate ids being used. I can’t provide a link. Sorry. I know that limits the ability to fix the problem. I’ll work on getting something helpful up.

It looks like my best option is to just use my little focus hack. Thanks anyways.

If you run http://jsfiddle.net/cpradio/C2STc/ in IE 6 (sorry, i don’t have access to IE 6), does it hide the paragraph?

yes

So the hide function works fine in 1.7.2 of jQuery, what version are you using?

1.3.2, that could be the problem… when I upgraded to 1.7.1, it acted exactly the same as my focus hack without my hack in place, except I get a runtime bug (Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus) when editing a form item (repopulating a form the user already filled out)

I could understand the error if the field was hidden and you were still trying to set focus to it or setting a property on it. But the field is visible and you are getting the error?

Yes, the field is visible.

For the field that gives the error, are you absolutely certain there isn’t a second element on the page with that same id? One that may still be not-visible.

100% positive

hmm… well, I’m at a lost. Not sure why you would be getting that error if the field is visible (it isn’t disabled, is it (though that shouldn’t matter…)?)

thanks for trying.

Could you please post snippets of your HTML and JavaScript as without debugging the issue is impossible as the hide method works perfectly fine in IE6, to me it sounds like a markup issue in your HTML.