CSS Problems with jCarousel - simply cannot work it out
===

First of all please see the jsfiddle I've prepared:

http://jsfiddle.net/E9SgC/14/

I understand that we shouldn't rely on externally hosted code so I will add it at the bottom of the question.

What I am trying to do is replicate the demo of the plugin here: http://sorgalla.com/projects/jcarousel/examples/static_circular.html

The difference is I am pulling the authors of my wordpress site and this html is outputted correctly on the page but for some reason I cannot get the avatars to sit side by side the full width of my page inside the carousel.

I have tried changing the width of `.jcarousel-skin-tango .jcarousel-container-horizontal` and `.jcarousel-skin-tango .jcarousel-clip-horizontal` and this does seem to make it wider but the distance between the avatars is increased as well so they travel in from a great distance when the buttons are pressed instead of them sitting in a horizontal line with a small gap between them.

Changing the width will mess up the next and previous buttons but that can easily be fixed to match the new carousel width.

I simply have no idea why it isn't appearing like the demo version, all I have changed is some css for the buttons.

Any help is __GREATLY__ appreciated.

__CODE__


__jCarousel Initialisation__

    jQuery(document).ready(function() {

        jQuery('#authorcarousel').jcarousel({
            scroll: 1,
            visible: 1,
            animation: 1000,
            auto: 0,
            wrap: 'circular',
            itemFallbackDimension: 75
        });
    });​

__HTML__

    <ul id="authorcarousel" class="jcarousel-skin-tango">
        <li>
            <img src="http://cdn2.iconfinder.com/data/icons/humano2/128x128/apps/comix.png" alt="" width="128" height="128" class="photo" />
        </li>
        <li>
            <img src="http://cdn5.iconfinder.com/data/icons/iconshock_guys/128/andrew.png" alt="" width="128" height="128" class="photo" />
        </li>
        <li>
            <img src="http://cdn4.iconfinder.com/data/icons/STROKE/communications/png/128/avatar.png" alt="" width="128" height="128" class="photo" /></li>
        <li>
            <img src="http://cdn2.iconfinder.com/data/icons/holloweenavatars/PNG/Frankenstein.png" alt="" width="128" height="128" class="photo" />
        </li>
        <li>
            <img src="http://cdn5.iconfinder.com/data/icons/iconshock_guys/128/matthew.png" alt="" width="128" height="128" class="photo" />
        </li>
    </ul>


__CSS__

    ul#authorcarousel  {
        list-style: none;
        width: 800px;
        margin: 20px auto 50px auto;
        padding: 0;
    }

    #authorcarousel li {
        margin: 0 0 5px 0;
        list-style: none;
        height: 90px;
        padding: 15px 0 15px 0;
        float: left;
        width: 90px;
    }

    #authorcarousel img {
        width: 75px;
        height: 75px;
        float: left;
        margin: 0 10px 0 0;
        padding: 3px;
    }

    #authorcarousel img:hover {
        opacity: 0.7;
        cursor: pointer;
    }

    /* = jCarousel
    ----------------------------------------------- */ 
    .jcarousel-skin-tango .jcarousel-container {
        background: #FFFFFF;
        border: none;
    }

    .jcarousel-skin-tango .jcarousel-direction-rtl {
        direction: rtl;
    }

    .jcarousel-skin-tango .jcarousel-container-horizontal {
        width: 100px;
        padding: 5px 20px;
    } 


    .jcarousel-skin-tango .jcarousel-clip {
        overflow: hidden;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width:  100px;
        height: 110px;
    }


    .jcarousel-skin-tango .jcarousel-item {
        width: 75px;
        height: 75px;
    }

    .jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-left: 0;
        margin-right: 10px;
    }

    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
        margin-left: 10px;
        margin-right: 0;
    }


    .jcarousel-skin-tango .jcarousel-item-placeholder {
        background: #fff;
        color: #000;
     }

     /**
     *  Horizontal Buttons
     */
     .jcarousel-skin-tango .jcarousel-next-horizontal {
         background: #F15A23 url(http://demo.samuli.me/smartstart/img/slider-arrows-medium.png) no-repeat -5px 37px;
        filter: alpha(opacity=60);
        background: rgba(241, 90, 35, 0.6) url(http://demo.samuli.me/smartstart/img/slider-arrows-medium.png) no-repeat -5px 37px;
        color: transparent;
        cursor: pointer;
        display: block;
        font: 0/0 a;
        height: 88px;
        margin: -26.5px 0 0;
        position: absolute;
        text-shadow: none;
        top: 42%;
        left: 90%;
        width: 30px;
        z-index: 90;
        background-position: -42px 36px;    
    }

    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
        left: 5px;
        right: auto;
    }

    .jcarousel-skin-tango .jcarousel-next-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
       filter: alpha(opacity=100);
       opacity: 1;
    }

    .jcarousel-skin-tango .jcarousel-next-horizontal:active {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
        cursor: default;
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .jcarousel-skin-tango .jcarousel-prev-horizontal {
        background: #F15A23 url(http://demo.samuli.me/smartstart/img/slider-arrows-medium.png) no-repeat -5px 37px;
        filter: alpha(opacity=60);
        background: rgba(241, 90, 35, 0.6) url(http://demo.samuli.me/smartstart/img/slider-arrows-medium.png) no-repeat -5px 37px;
        color: transparent;
        cursor: pointer;
        display: block;
        font: 0/0 a;
        height: 88px;
        margin: -26.5px 0 0;
        position: absolute;
        text-shadow: none;
        top: 42%;
        left: 17%;
        width: 30px;
        z-index: 90;
    }

    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
        left: auto;
        right: 5px;
    }

    .jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
    .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
        cursor: default;
        filter: alpha(opacity=60);
        opacity: 0.6;
    }

​

​