jQuery & IE crashing on $('#someDiv').hide();

Question

Well after a while of scratching my head and going "huh?" trying to figure out why IE would straight up crash when loading one of my pages loaded with jQuery goodness, I narrowed down the culprit to this line

$('div#questions').hide();

And when I say IE crashes, I mean it fully crashes, attempting to do its webpage recovery nonsense that fails.

I am running jQuery 1.4.2 and using IE 8 (haven't tested with any other versions)

my current workaround is this:

if ($.browser.msie) { 
    window.location = "http://www.mozilla.com/en-US/products/download.html"; 
}

For some reason I feel my IE users won't be very pleased with this solution though.

The div in question has a lot of content in it and other divs that get hidden and displayed again, and all of that works just fine and dandy, it is only when the giant parent div is hidden that IE flips out and stabs itself.

Has anyone encountered this or have any possible ideas of what is going wrong?

EDIT:

Everything is wrapped up in the $(document).ready(function() { }); And my code is all internal so I can't link it unfortunately.

EDIT: IE 8 crashing code found

<ol class="actionHelp">
    <li>List the tasks (or actions) that are involved in your pattern along the top (one per column)</li>
    <li>Put the starting point in the first column and the ending point in the last column.</li>
    <li>To fill in the middle, simply ask: "What happens next?" If only one thing ever happens next, then it should get 100%. If 70% of the time one thing happens next, and 30% of the time another thing happens next, then put 70 in one box and 30 in the other.</li>
    <li>Each row should add up to 100%</li>
    <li>The last row is the exit and should not have any percentages in it.</li>                
</ol>

I have no idea why this is causing problems in IE but here is the CSS

.actionHelp {
    margin: 0 0 0 20px;
}
.actionHelp li {
    margin: 5px 0;
}

Using an unordered list instead of an ordered list results in no crashing, but once I switch it back I get the crashes all over again, this element doesn't need to be ordered I just had it there as steps which make logical sense, I would still like to know why this is freaking out IE.

Does jQuery + IE + hiding an ol element = OMG IE FAIL? Or is there a workaround?

It appears to be affected any list element with a list-style other than none

Answer 1

.hide() is just a wrapper for setting the elements style to display:none. Have you tried document.getElementById("#questions").style.display = "none" just to see if that makes any difference? It might help you pinpoint whether jQuery itself is causing a conflict.

Answer 2

Step through the code in IE's debugger (with a non-minified jQuery) and see what line it dies at.

Answer 3

Your problem obviously is not div#questions itself. Can you try removing (or commenting out) all of div#questions's contents and adding each element back, one at a time, until IE starts crashing again?

Once you've found the culprit, then do the same thing again for that element, removing all of its contents and adding each element back, testing after each one.

Keep doing this until you find the real source of the problem. I know this is a pretty low-tech solution, but often it's also the quickest one.

Answer 4

Turn off extensions.

It is extremely unlikely that javascript is your only problem.