Disjointed rollover issues in explorer and safari

I have got a disjointed rollover script from Dax Ass开发者_Python百科ist: www . daxassist . com/js/disjointedrollovers.cfm

check out the page I'm working on: http://www.gherkin.co.nz/tester/

The rollovers works pretty well on firefox, but in Explorer the larger images show up under the central div, and in Safari, they don't seem to work at all.

Any ideas?

When trying to debug problems like this, a good first step will be validation: http://validator.w3.org/check?verbose=1&uri=http://www.gherkin.co.nz/tester/

There are some other problems, but the one that seems to be causing the trouble in some browsers are your images' repeated ID attributes (element ids should be unique), and the onmousover/onmouseout ids you're targeting.

In your case, the changer2 function that's called when hovering over elements is looking for images by id (using document.images[id]). Firefox returns a single image, and some other browsers (chrome, presumably safari) returns an array of images, and then the function doesn't work as expected.

So, step one: fix your ids, and the 3rd argument of your changer2 functions.

It looks like your images are inheriting the text-align: center CSS attribute. Either override this in your CSS for the large_card1 style or remove it altogether.

EDIT I've looked at your HTML and it seems you have a bunch of img elements on your page that all have the ID of "holder". You should only have unique IDs for your elements.

I would suggest you remove all those duplicated img tags since you're only interested in swapping out one of them. My suspicion is that IE is swapping out the image for the last <img id="holder"...> it finds, Firefox is using the first and Safari is saying, "Screw this! I'm too confused" and isn't swapping anything.