relative positioned elements don't hide with jQuery hide() in IE 7

Question

I am trying to show and hide elements on my page with jQuery's hide() method, and it works perfectly in all browsers besides IE 7. These elements are hidden when the page loads in the jQuery(function($){} method, and then can be later shown or hidden by the user.

In Internet Explorer, not all elements are hidden. Some (so far, only buttons and divs) with a style position:relative remain when the page loads, though all the text inside of these elements is hidden. After the page loads, I can click on the button that shows or hides these elements and they will then display correctly until the page reloads.

I have read that attaching a height style to these elements will fix similar bugs, but I tried this with no effect. Does anybody know of something I could do to fix this?

Answer 1

try

$(element-id/class).css("display","none");

$(element-id/class).css("display","inline");

instead of using .hide() method. The css property will surely work without doubts.