Javascript / css problem in IE

[tzulah]

I'm having a problem with a site redesign I'm working on. It works fine in Firefox both locally and remotely, and it works fine in IE locally, but a bug appears when I view it live in IE. I suspect the problem is related to the speed of execution of the code, but I'm really not sure.

I have a gallery of thumbnails that, when hovered over or clicked on, produce larger images with descriptions below. The bug is that anytime the mouse hovers over a new thumbnail, there is a brief overlapping of content before the new content is displayed properly. Occasionally the default image and text will be part of this overlapping too, even when switching from one selected item to another (the default item should never be visible again once a thumbnail is clicked).

My latest discovery is that the bug is barely noticeable when it is live at a non-password protected location, although it is still bad enough that I'd like to fix it.

Here's the sample:

http://www.westwebworks.ca/temp/portfolio.html

And the password-protected example, in which the bug is more noticeable:

http://www.westwebworks.ca/temppw/portfolio.html

user: publictest
pw: publictest


Any suggestions or advice would be greatly appreciated!

Thanks,

tzulah

[tzulah]

I've just discovered that this bug ONLY appears if Internet Explorer is set to "Check for newer versions of stored pages at every visit to the page".

Some suggestions have been to set a background image that is identical to the main image, so that on hover, the overlapping (or flicker) is not visible. Those examples were all simple single-image hover-over effects, so I'm not sure how well they will apply to my gallery (since I have other elements, both images and text, appearing and disappearing with each hover-over). We'll see.

I'd still appreciate ideas if you have any!