I have been working on a site that uses a lot of [YUI](http://developer.yahoo.com/yui/) components — specifically Grids and Menubar. They were both CSS based, even though the Menubar required a touch of JavaScript, like so:

var oMenuBar = new YAHOO.widget.MenuBar(“menubar”,
{visible: true,
position: “static”,
autosubmenudisplay:true
}
);
oMenuBar.render();
oMenuBar.show();

function onMenuMouseOver(p_sType, p_aArguments) {
var oEvent = p_aArguments[0];
}

The page had been rendering just fine in FireFox. When I loaded it up in IE6, however, the page rendered correctly, but then a popup appeared, saying that it couldn’t render the page. When you clicked “Okay” it went to IE’s standard “Page Not Found” display.

Weird, I know.

I looked at the code and didn’t see anything that I could see that caused it. I went to the YUI Message Board and appealed to the experts. [Dav Glass](http://blog.davglass.com/) that sometimes that happens when IE hasn’t rendered the object that you are trying to access. The work-around is to use the [`onAvailable` or `onContentReady`](http://developer.yahoo.com/yui/event/#onavailable) methods. I looked at my code and quickly figured out that it must be the `menubar` div that isn’t rendered yet. So I changed it to this:

function MenuObj(id) {
YAHOO.util.Event.onAvailable(id,this.makeMenu,this);
}

MenuObj.prototype.makeMenu = function(that) {

var oMenuBar = new YAHOO.widget.MenuBar(“menubar”,
{visible: true,
position: “static”,
autosubmenudisplay:true
}
);
oMenuBar.render();
oMenuBar.show();
}

var menubar = new MenuObj(“menubar”);

function onMenuMouseOver(p_sType, p_aArguments) {
var oEvent = p_aArguments[0];
}

And wouldn’t you know? That worked.

Big thanks to Dav for helping me out!