JQuery animate issue in IE 8.0.6

We are building a site on WordPress and have used a plugin to change a word in the header using JQuery. This works fine.

On the homepage I have written a short function to animate an arrow to slide above three boxes with pauses built in. This also works fine in all browsers tested except for IE 8.0.6. It works in IE 8.0.7 for me. Unfortunatly our client is using Internet Explorer 8.0.6. The word in the header changes but the arrow doesn’t slide.

You can see the site here: http://coachplus-uk.com/clients/coachplus/

I setup a stand alone of the animation function I wrote here http://freshspring.co.uk/slider.html which when the client views in the same browser works fine and she sees the animation.

So I presume there is a conflict between the two scripts or something but am surprised that it only occurs in IE 8.0.6 on Windows XP. It all works fine on IE 8.0.7 on Windows 7.

Does anyone have any ideas or pointers as to what the problem might be please?

Edit: On further inspection, this seems to work in IE8 capatability with IE8 standards document mode or IE8 in Quirks Mode but not IE8 in IE8 Standards mode.

The first thing I noticed when I opened the site is that there are 2 JavaScript errors occurring in Chrome and Firefox and I get 3 error dialogs in IE 8 (in IE Tester)

element.dispatchEvent is not a function

Occurs in prototype.js?ver=1.6.1 (line 4619)

element.style is undefined
  element.style.width = w +"px";

Occurs in lightbox.js?ver=1.8 (line 33)

You might want to resolve these first.

Are you actually using prototype / scriptaculous / lightbox anywhere? You could probably replace those 3 with 1 jQuery plugin to do the lightbox (or if you’re using NextGen to manage all your image galleries, just using the one included with that…)

Hi John,

I’ve killed off Prototype as it wasn’t being used and this seems to have solved the problem in my test environment so many thanks for the pointer. Just need to check it works for the client now.