jCarousel Firefox and Partial Image

[Stupidscript]

Tested with Windows 7, OSX Panther, Ubuntu 14.04, various versions of Firefox and other browsers

jCarousel in Firefox (all platforms/versions) is not clipping/suppressing partial images, like Chrome, Safari, MSIE and Opera all do.

Here is an example of how it looks in Chrome 39.0.2171.71 m in Windows 7:

Here is how the same code displays in Firefox 11.0 in Windows 7:

When I clip/resize the jcarousel area to suppress the partial image, I also lose the "next" directional control, as it is a child of the jcarousel area.

Tried: "scroll: 4", "visible: 4" and "itemVisible: 4" without success.

Looking for thoughts on (a) getting Firefox to work as the others do or (b) suppressing partial images while leaving the controls in place.

[jsor]

Could you please setup a reproducible test case.

[Stupidscript]

Is it appropriate to use a live URL for the test case, or do you require a completely stand-alone setup?

[jsor]

A reduced test case would be simpler, but i can try to find something on the live url first.

[Stupidscript]

Terrific! Here's the URL:

http://www.handcraftedmodelships.com/laguna-lake-sloop-26-inch.php?test=1

Note the "test" parameter, which overrides the Firefox resizing fork, making the jcarousel area the same size for all browsers.

With "?test=1", you'll see the partial image and the control. Without "?test=1", you'll see the current kludge ... no partial image and no control.

Thank you very much for taking a look.

[jsor]

I think the problem is caused by some wrong styles. If you extract the carousel and create a JSFiddle, i can try to fix it.

A little explanation (maybe you can solve it by yourself). This is how the generated markup looks like:

<div class="jcarousel-skin-name">
  <div class="jcarousel-container">
    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
    <div class="jcarousel-next"></div>
    <div class="jcarousel-clip">
      <ul class="jcarousel-list">
        <li class="jcarousel-item-1">First item</li>
        <li class="jcarousel-item-2">Second item</li>
      </ul>
    </div>
  </div>
</div>

The .jcarousel-clip element defines the visible area of your carousel. This should probably have a width of 550px in your carousel. This is also the element with which you should position the carousel inside .jcarousel-container. The .jcarousel-list element must not have any paddings, margins, lefts and rights because that is where jCarousel computes the position of the carousel and this is the element which is animated.

Hope this helps.

[Stupidscript]

Thank you for your replies, and apologies for the length of time to respond. I will be certain that the nesting occurs as you have described. It makes total sense, to me. Thank you, again.

[jsor]

I'm closing it for now. Feel free to reopen if you have any further questions.