Carousel keeps having a blank

Hi. I have implemented a carousel of brand.
But it keeps changing (in a group of 3) the 4th image to a blank non clickable.
link is http://mamansdeslaurentides.ca/index.php/fr/
If I refresh with f5, a new item is masked with blank.
The thumbnail images are fine.


IE: In the carousel, I have Item1 item2 item3 blanked_Item4 item5 item6 item7 blanked_item8

I have looked at http://www.hikashop.com/en/forum/4-how-to/50964-carousel-in-module-displaying-too-many-rows.html but I can't find amy images as background.

Something else: it extend outside on android and Mac devices.

Let me know what you need to help me troubleshoot.
Thanks

It worked under Firefox but under IE, it looks broken (the images are not hidden anymore by the rectangular slider box)
How would you suggest the best way to troubleshoot this if it happens on another element (any good gui or template editor for joomla)

second: It extend outside on android and Mac devices. Is this a bootstrap issue? I have upgraded to bootstrap 2.3.1 but same issue (it fixed some I had with the backend menus).
Thanks again

I just took a look and it's working fine with IE on my end. Which version are you running?
The best way to detect that kind of bug is simply to use the "inspect element" feature of your browser and look for your hidden div.
You can then see the effect of the css rules by disabling it.

About the android thing, it's quite normal since you specified an exact number of column. You can easily understand that carousels can't be responsive because it would require a modification of the Jquery despite the specified information.

IE 9. I have tried on 2 different PCs. Same issue. I'll try to troubleshoot with dreamweaver by playing around divs
Would it require lot of work if instead of having a fixed size value I would go for a ÷?

Hi,

Have you solved your problem ? Because I tried on IE9 and it's working fine.

Unfortunately not under IE 9. I didn't take the time to troubleshoot yet but I've attatched a screenshot of what it gives me (might help you to guide me in the right direction)
Thanks a bunch

Hi,

You have to add the css property "position:relative; " on the ul of the carousel.
You need to edit the views "product /carousel" and "category / carousel" for that.

I have added the following to front-end css file of hikashop:
}
.hikashop_product_carousel_div ul li{
position:relative;
}
.hikashop_category_carousel_div ul li{
position:relative;
}

Looking at IE9, I don't see the change.
Did I applied the change correctly?

It worked. A1. Thank you