What’s wrong with my script?

Hi,
I created a script that takes a list and separates it into two divs (yeah, I know–don’t ask me why I had to do this with js and not in the HTML… it’s a long story).

It works as it should in Firefox/Safari/Chrome, but fails in IE 6 and 7. I can’t for the life of me figure out why this should be.

Could you find it in your hearts to help a poor Javascript noobie?

[code]function start()
{
startList();
columnList(‘menulist_2tcc’);
columnList(‘menulist_3tcc’);
columnList(‘menulist_4tcc’);
}

function columnList(src)
{
var list_ul = document.getElementById(src);

var left_div = document.createElement(‘div’);
var right_div = document.createElement(‘div’);

var items = list_ul.childNodes;

if (src == ‘menulist_3tcc’)
{
var itemsLength = items.length/2-1;
}
else
{
var itemsLength = items.length/2;
}

for (i = 0; i < itemsLength; i++)
{
left_div.appendChild(items[0]);
}

itemsLength = items.length;

for (i = 0; i < itemsLength; i++)
{
right_div.appendChild(items[0]);
}

list_ul.appendChild(left_div);
list_ul.appendChild(right_div);

left_div.setAttribute(‘id’, ‘left’);
right_div.setAttribute(‘id’, ‘right’);
}

function startList()
{
if (document.all && document.getElementById)
{
navRoot = document.getElementById(“menulist_roottcc”);
for (i = 0; i < navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName == “LI”)
{
node.onmouseover = function()
{
this.className += ” over”;
}

node.onmouseout = function()
{
this.className = this.className.replace(” over”, “”);
}
}
}
}
}[/code]

Also in #JavaScript _↴