infinite carousel works on chrome but not on firefox

Question

i'm using infinite carousel it works great on chrome but images are not displayed on firefox here's the link http://www.mawk3y.net/alsoos/saudisaif i've tried to change the float from left to right of the

and the second screen of images showed up but arrows don't work at all

.infiniteCarousel {
width: 924px;
position: relative;
}

.infiniteCarousel .wrapper {
width: 850px; 
overflow: auto;
min-height: 10em;
position: absolute;
top: 0;
margin-right: 39px;
}

.infiniteCarousel ul img {
height:127px;
width:279px;
}

.infiniteCarousel .wrapper ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}

.infiniteCarousel ul li {
display:block;
float:left;
padding: 0 3px 0 3px;
height: 160px;
width: 279px;
text-align:center;
color:#5e3939;
font-family: 'Conv_GE SS Text Medium';
 }

.infiniteCarousel ul li a img {
display:block;
}

.infiniteCarousel .arrow {
display: block;
height: 36px;
width: 37px;
background: url(../images/arrow.png) no-repeat 0 0;
text-indent: -999px;
position: absolute;
top: 37px;
  cursor: pointer;
}

.infiniteCarousel .forward {
background-position: 0 0;
right: 0;
top: 45px;
}

.infiniteCarousel .back {
background-position: 0 -72px;
left: 0;
top: 45px;
}

.infiniteCarousel .forward:hover {
background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
background-position: 0 -108px;
}

Answer 1

the page's direction is rtl so the carousel didn't work on firefox but still don't know why worked on chrome so i had to add style to the containing div

carousel{
direction:ltr;
}