jQuery multiple carousels in jQuery UI tabs do not

Question

I have a problem in the page whose URL can be seen below:

http://hero.mynet.com/new/

There is a tabbed structure at the middle bottom of page.Each tab consists one carousel working.And each carousel item (image) can be shown in an overlay when they are clicked.

I used jQuery 1.3.2 (I know it's old but I cannot change because of other depencies), jQuery UI 1.7.3, jCarousel 0.2.8 and FancyBox 1.3.4 to build this.

Problem can be seen in the screen shots of Internet Explorer and Chrome when 2nd or 3th tab clicked and prev button clicked.

What can caused this, I tried many things to fix this but none of the fixed my problem.

What do you recommend? It's difficult to change all structure to a new one because of the time planing of this job.

tHanks to all answers already now

Internet Explorer Screen Shot

Chrome Screen Shot

Answer 1

This problem is because you are trying to create the carousel after you have created the tabbed interface. So probably jcarousel is trying to render the carousel inside a container whose display property is set to null (a non-active tab) . Since position and many other properties of this container can not be reliably determined, this will fail in most browsers. Please try rendering the carousel before, once the carousel is rendered, then create the tabs.