[RESOLVED] 'document.X' is null or not an object in IE 6, works elsewhere

[eri]

Problem site: http://tinyurl.com/dye7dm

I created this site working in Firefox and tested it in IE 7, works perfectly. The JavaScript pre-loads the mouseover images and then does the mouseovers at the appropriate time.

In IE 6 the JavaScript does not execute and the error 'document.X' is null or not an object appears upon mouseover and the mouseover does not work.

I changed the way I produced the JavaScript for this site just slightly from previous sites that worked perfectly, but then I went back in to try to fix it back to the old way and I must have missed something. I'm not a terribly experienced JavaScript user--I used it for a while years ago when mouseovers were the "newest thing" and then didn't use it again until last year when I took a brief class in it that involved very little debugging--basically just "check the error console".... doesn't help in this case because 1) There are no errors generated in Firefox and 2) I checked the error in IE 6, it makes no sense to me and a web search generates results but not results that apply directly to this situation.

I'm stumped. Any suggestions would be greatly appreciated, I'd really like this thing to be cross-browser compatible at least back to IE 6.

[BonRouge]

You'll have no problem if you use CSS rather than javascript.
Here's an example: http://bonrouge.com/~rollover3

[eri]

Hi BonRouge,

Thank you for your reply--whenever I post I always hope to get a reply from you or one of the few others of your caliber. ;)

Personally, I would prefer to use CSS exclusively for hover states, but I'm running into a problem with it, perhaps you can recommend a solution.

The default images are transparent PNGs (so that the tail of the M shows through). If I make them backgrounds, then in IE 6 they will show up without transparency--I use PNGfix.js but I haven't figured out how to make a PNG transparent if it is used as a background. I stupidly didn't test in IE 6 and once I found out about this problem I had to go back and change dozens of sites I on which I used pngs as the backgrounds of empty divs because the places where they were supposed to be transparent were obscuring content. I ended up having to actually load the images in the divs to get them to show the transparency.

Any ideas? I'd LOVE to eliminate the JavaScript!

--Eri

[EDIT: Incidentally, the site is written all in tables rather than CSS at the request of the client, so if the only solution is to make the images JPGs instead of PNGs, I guess I could do that, I'd just rather not, in case something causes the background and menu to not line up properly.]

[eri]

OK... I gave up on IE6 entirely and used PHP to determine if the browser was IE and less than version 7. If it was, I just eliminated the JavaScript altogether. Not the desired result, but at least there are no errors now. :(