Javascript disabling CSS hover images in IE - help

Hello to all. I'm helping out a friend by building her a new site.

I'm not very good with javascript, so I would love any help.

I have a page with a javascript scrollbar (so I could have a custom one on all browsers). I did not design the code (but it's used with permission), so I don't know anything about editing it.

I am using a CSS hover feature for this gallery page (roll the mouse over and the larger image will hover on the right).

It works perfectly in firefox, but in IE - the javascript isn't playing nice with something else - and the image disappears (the black box for it stays - but there's no picture).

I know it's the java, because if I remove it, it works fine.

You can see the test page at:

www.natashasims.com/test_gallery2.html

You can access all the CSS and HTML code directly there (I haven't moved it into its own sheet yet).

If anyone wants me to post any of the code, please just ask (it's a lot if the js files are needed too - so I thought I would leave them out of the post for now).

Thanks so much for any help anyone can give!! :)

Additional note -

In IE6 nothing happens when the thumbnails are rolled over at all.

Hi DH,

The best thing to do is have a separate CSS for IE because it's a headache to solve any IE issue, especially the hover over image. From my experience, it's not the JS that's disabling your hover over image, it's simply IE. I wish I had an answer for why this is, but I have only been coding for a few years so I don't know. What I do know is that you can fix the problem by choosing "display:block" and a background color for your hover over in IE only. Yeah it doesn't look as pretty, but honestly IE 8 will take over eventually, and that seems to read images and JS just fine (it looks like they finally took a cue from Firefox and fixed a ton in IE8). IE 6 only has about 13% of the users, IE 7 is around 40%.

Check out the work around I did on a student credit cards website. Look at the home page in IE and then in Firefox. You'll see that with Firefox there are buttons for the "Apply" section while in IE it's a block with a basic color as the background. Then checkout the CSS of the site. I kept all the CSS on one page, but used a period or underscore before certain portions of the CSS code. The period is for IE 6 and the underscore is for IE 7. Firefox won't read anything with a period or underscore before it. This does make the CSS all kinds of wonky looking (I admit it's not even close to pretty code), but it gets the job done and allows a hover over image to appear in both versions of IE and the nice button to appear in IE 8 and Firefox.

Nick @ 7up
eCommerce Shopping Cart

Thanks for the reply! I did eventually get it to work. Nice to know that IE8 is going to work more like Firefox. Because IE is usually the kink in anything I am working on.

Now if only other people would UPGRADE. LOL! (I haven't myself yet, because I want to make sure the site works on IE7 first, and then I will upgrade and test IE8).