setAttribute doesn't work in IE6

Answer 1

(Most of the below was before the OP clarified they were setting an event handler; left the list of other issues in case others find them useful)

IE6 makes a mess of several aspects of setAttribute. Without knowing the exact problem you were dealing with (this was before the edit inidicating it was an event handler), it's hard to be sure whether that's really the problem, but here are a couple of known issues:

You can't use setAttribute to set event handlers

It's best to set event handlers using the reflected property or with addEventListener [standard] / attachEvent [IE], not setAttribute (and you can't use setAttribute on IE).

So, any of these will work:

// Using reflected property
theElement.onclick = yourFunction;

// Using DOM2 standard addEventListener; note it's "click", not "onclick"
theElement.addEventListener("click", yourFunction, false);

// IE's non-standard alternative to addEventListener
theElement.attachEvent("onclick", yourFunction);

...not

// This doesn't work on IE (at least)
theElement.setAttribute("onclick", "yourFunction();");

The addEventListener / attachEvent way of doing this is cool for other reasons: You can have multiple event listeners on the same event of an element. You can't do that using the reflected property.

So for your specific situation:

menuItems = document.getElementById("menu").childNodes; 
for (i = 0; i < menuItems.length; i++)
{ 
    if (menuItems[i].className != "blue") {
        menuItems[i].onmouseover = function() {
            HoverMenu(this);
        }
    }
}

Certain attributes need their modified names

To set the class attribute, you have to use the name "className" even though there's no technical reason you should have to (since setAttribute takes a string for the attribute name, there's no conflict with reserved words); most other browsers use "class". Example: On most other browsers, both of these lines will set the class on the element:

theElement.setAttribute("class", "foo"); // String for name, "class" should be fine
theElement.className = "foo";            // Reflected property avoids keyword clash

...but on IE6 that first line doesn't work, it has to be

theElement.setAttribute("className", "foo");

...which doesn't work on some other browsers. Similarly, to set the "for" attribute (of a label, for instance), you have to use "htmlFor" instead of "for".

(Again, the altered names make sense with the reflected properties for these on DOM element instances, to avoid conflicts with reserved words in scripting languages, but not the string names being passed into setAttribute.)

This page has quite a list of attributes that are problematic with IE.

setAttribute can't be used to set the style attribute

...you have to use the style property instead; but to be fair, that's usually a more convenient way. Example: This won't work on IE:

theElement.setAttribute("style", "color: blue"); // Doesn't work on IE

...but this will:

myElement.style.color = "blue";

Slightly OT: Look at libraries

JavaScript libraries like Prototype, jQuery, Closure, or any of several others will make most of the above a lot easier and smooth out differences amongst browsers if you go through their APIs.

Answer 2

I would really look at jquery. It has all the functionality that works with IE6 and this would be so much easier than the code you have here. It would look like this:

menuItems = $("#menu")[0].childNodes; 
$.each(menuItems, function()
{
    var item = $(this);
    if (item.attr("className") != "blue")
        item.mouseover(HoverMenu);
} 

This code might need to be tweaked a little as I am just writing from memory.

I say easier because what you are trying to do in setting events like this varies based on browser and can be a headache to setup. But with jquery it is all done for you.