Topic awaiting preservation: DIV layers not showing up after appendChild in IE (Page 1 of 1)

I basically have two container DIVs filled with childNodes that are divs. I am moving any selected divs from one container to the other (think of the Available columns/Selected Columns GUI in SQLServer's DTS Data Driven Query Task Properties, where you have four buttons between the two lists move all to, move selected to, move all from, move selected from) Hopefully, you get my drift. Anyway, I have everything moving correctly, the actual content are just names and they are being sorted alphabetically, and that works fine. Now the problem, I also am displaying the lines with the even line = grey, odd line = white look. I do this on both containers the source container works fine, the destination container however does not display the contents until the first element (initially the only visible one) is click then the GUI is rendered with everything displayed. I've also noticed that if I move say 10 items to the destination container and I'm working with a newly loaded page, only the first item moved is rendered. I click it, then the other nine appear sorted and colored correctly. Now say I remove (pick a number), everything looks fine. Now say I add an amount greater than 10, only the top ten are displayed until I click one of them, now they are all displayed and from that point on, that number will be displayed correctly without a click (Does that make sense?). I've been pulling my hair out over this because the two containers use the same source to sort and color, and the source container works correctly, but the destination container doesn't.
When I don't set colors for the destination, it works fine, but as soon as I go to set the className to the appropriate class it doesn't display right away, only after I click an item in the container. Hopefully my problem makes sense. Let me know an I'll try to better clarify.

-meccaman

I wish I could give a URL for the actually page but I can't, however here is the javascript source:

function _sortList(destination) {

      var dest = document.getElementById(destination);

      var itemStr = "";



      for (x = 0; x < dest.childNodes.length; x++) {

         itemStr += dest.childNodes.item(x).id;



         if (x <  dest.childNodes.length - 1) {

            itemStr += ",";

         }

      }



      var itemArr = itemStr.split(',');

      var itemNode = null;

      var replacedNode = null;



      itemArr.sort();



      for (x = 0; x < dest.childNodes.length; x++) {

         if (dest.childNodes.item(x).id == itemArr[x]) continue;



         itemNode = document.getElementById(itemArr[x]);

         replacedNode = dest.replaceChild(itemNode, dest.childNodes.item(x));

         dest.appendChild(replacedNode);

         x--;

      }



      itemArr = null;

      itemNode = null;

      replaceNode = null;

      dest = null;

   }



   function _correctLineItems(obj) {

      var line = document.getElementById(obj);



      for (x = 0; x < line.childNodes.length; x++) {

         if (x % 2 == 0) {

            line.childNodes.item(x).className = "ptitEvenLineItem";

         } else {

            line.childNodes.item(x).className = "ptitOddLineItem";

         }

      }



      line = null;

   }



   function _updateListCount(obj, num) {

      var count = document.getElementById(obj + "_count");



      count.innerText = num;

      count = null;

   }



   function onClickMoveFromTo(source, destination, doAll) {

      var src = document.getElementById(source);

      var dest = document.getElementById(destination);

      var item = src.childNodes.item(0);

      var nextItem = null;



      while (item != null) {

         nextItem = item.nextSibling;



         if (parseInt(item.selected) == 1 &#0124; &#0124; doAll) {

            if (parseInt(item.selected) == 1) {

               item.style.backgroundColor = '';

               item.style.color = 'black';

               item.selected = 0;

            }



            dest.appendChild(src.removeChild(item));

         }



         item = nextItem;

      }



      var srcCount = src.childNodes.length;

      var destCount = dest.childNodes.length;



      src = null;

      dest = null;



      _sortList(destination);

      _correctLineItems(source);

      _correctLineItems(destination);

      _updateListCount(source, srcCount);

      _updateListCount(destination, destCount);

   }

That sounds reeeeally complicated. I got lost. Any chance of seeing an example?

Slime I sent the code to you via email bc I don't have a site that I can use.

Slime thanks for taking the time to look at that for me. After spending countless cycles on the web searching I just replaced the divs within my container div with spans (I probably should have done that from the start) and it worked. I still haven't discovered why the divs behaved that way. I'll save that stress for another day....