innerHTML causes IE6 to (permanantly) lock up

Question

On a site I am working on I load up a series of images which can be animated using some controls I implemented w/javascript. Everything works just fine in all browsers but IE6 which locks up and never recovers; at least not w/in the 15min I let it sit there.

The part it is choking on is a portion where I try to modified the contents of a particular div.

Before problem:

<div id='animation_image'></div>

After problem:

<div id="animation_image">  
  <div id="daily_loop_image_13" class="loop_image">
    <img name="animation" src="/path/to/image/13/20100119/world_14.gif" 
      class="hiddenElements" border="0">
    </div> 
  <div id="daily_loop_image_12" class="loop_image">
    <img name="animation" src="/path/to/image/12/20100119/world_13.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_11" class="loop_image">
    <img name="animation" src="/path/to/image/11/20100119/world_12.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_10" class="loop_image">
    <img name="animation" src="/path/to/image/10/20100119/world_11.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_9" class="loop_image">
    <img name="animation" src="/path/to/image/9/20100119/world_10.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_8" class="loop_image">
    <img name="animation" src="/path/to/image/8/20100119/world_9.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_7" class="loop_image">
    <img name="animation" src="/path/to/image/7/20100119/world_8.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_6" class="loop_image">
    <img name="animation" src="/path/to/image/6/20100119/world_7.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_5" class="loop_image">
    <img name="animation" src="/path/to/image/5/20100119/world_6.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_4" class="loop_image">
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_3" class="loop_image">
    <img name="animation" src="/path/to/image/3/20100119/world_4.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_2" class="loop_image">
    <img name="animation" src="/path/to/image/2/20100119/world_3.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_1" class="loop_image">
    <img name="animation" src="/path/to/image/1/20100119/world_2.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_0" class="loop_image">
    <img name="animation" src="/path/to/image/0/20100119/world_1.gif" 
        class="" border="0">
  </div> 
  <div id="weekly_loop_image_1" class="loop_image">
    <img name="animation" src="/path/to/weeklyImage/1/20100119/world_wk2max.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="weekly_loop_image_0" class="loop_image">
    <img name="animation" src="/path/to/weeklyImage/0/20100119/world_wk1max.gif" 
        class="hiddenElements" border="0">
  </div>
</div>

I've tried:

• storing all the elements w/in animation_image as a string and setting that to be the innerHTML
• creating empty/placeholder divs w/in animation_image and populating them individually
• using appendChild instead of innerHTML
• adding another div under "animation_image" and putting all the images/divs in there using the 3 methods above this

None of it seems to work in IE6 - all methods work just fine in FF3.0+, IE7+, Chrome 2+, etc. If I exit the javascript prior to the innerHTML it works just fine but if I even try to populating a single div (within animation_image) via the method in the 2nd bullet point, it locks up and never recovers.

I'm sure I left something out but I am totally freaking out ATM. Thanks in advance.

Update: Here is a link to the javascript along w/sample XML (http://pastebin.com/m5b426a67)

Answer 1

Not quite sure how I missed this in my days and days of googling but it looks like the issue is related to the AlphaImageLoader "fix" for dealing w/transparent PNGs. The article I found gets into more detail about the underlying issue:

http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html

When I removed the entry in png_fix.css the page - in its original form - loaded flawlessly in IE6. Now I just need to go and try to convert all the (transparent) pngs to gifs which might not be a feasible solution either.

I really appreciate everyone's help and I apologize for any wild goose chases I sent people on. Thank you all VERY VERY much.