flexslider issue: colorChips li are loading with a 1px width

flexslider issue

<script type="text/javascript">
     $(window).load(function() {
      $('.flexslider').flexslider({
        namespace: "chip-",
        selector: ".colorChips > li",
        controlsContainer: ".colorOptions",
        animation: "slide",
        animationLoop: false,
        controlNav: false,
        itemWidth: 40,
        slideshow: false,
        prevText: "",
        nextText: "",
        itemMargin: 8
      });
    });
     </script>

<div class="colorOptions">
        <div class="flexslider">
            <ul class="colorChips">
                <li><a class="colorChip" href=""><img src="/images/HRX_305_Black_th.jpg" alt=""></a></li>
                <li><a class="colorChip" href=""><img src="/images/HRX_305_Black_th.jpg" alt=""></a></li>
                <li><a class="colorChip" href=""><img src="/images/HRX_305_Black_th.jpg" alt=""></a></li>
                <li><a class="colorChip" href=""><img src="/images/HRX_305_Black_th.jpg" alt=""></a></li>
            </ul>
            </div>
        </div>