JQuery slider does not work in Firefox2.0
Please see below and let me kow why the images r not displayed correctly in Firefox 2.0, it works fine in IE7.
-
<html>
<title></title>
<head>
<STYLE>
BODY {
BACKGROUND-COLOR: #000000;}
.sliderGallery {PADDING:10px; BACKGROUND:#000000; OVERFLOW: hidden; WIDTH: 968px; position:relative; HEIGHT: 238px;}
.sliderGallery UL {MARGIN:0px; WHITE-SPACE:nowrap; LIST-STYLE-TYPE: none; POSITION: absolute; }
.sliderGallery UL LI {DISPLAY:inline; width:250px; height:200px;}
.sliderGallery UL LI a:link, a:visited { width:100%; padding-top:155px; color:#B3B3B3; font-family:Arial; font-size:11px; text-decoration:none; text-align:center;}
.sliderGallery UL LI a:hover{color:#fff; text-decoration:none;}
.sliderGallery #product1 {background:url(images/img_01.jpg) no-repeat;}
.sliderGallery #product2 {background:url(images/img_02.jpg) no-repeat;}
.slider {PADDING: 1px; MARGIN-TOP: 200px; BACKGROUND:url(images/sliderbg.jpg) no-repeat; WIDTH: 968px; POSITION: absolute; HEIGHT: 30px;}
.handle {Z-INDEX: 100; BACKGROUND:url(images/slider.png) no-repeat; WIDTH:50px; CURSOR: move; POSITION: absolute; TOP: 12px; HEIGHT: 17px;}
.slider SPAN {FONT-SIZE: 70%; Z-INDEX: 110; CURSOR: pointer; WIDTH:968px; COLOR: #fff; POSITION:absolute; TOP:2px; font-family:Arial; font-weight:bold;}
.slider .slider-lbl1 {LEFT: 10px;}
.slider .slider-lbl2 {LEFT: 160px;}
</STYLE>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript">
</script><script src="ui.mouse.js" type="text/javascript">
</script><script src="ui.slider.js" type="text/javascript"></script>
<SCRIPT type=text/javascript>
window.onload = function () {
var container = $('div.sliderGallery');
var ul =$('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth();
$('.slider', container).slider({
minValue: 0,
maxValue: itemsWidth,
handle: '.handle',
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</SCRIPT>
</head>
<DIV class="sliderGallery">
<UL>
<LI class="sliderGallery" id="product1"><a href="#">Link1</a></LI>
<LI class="sliderGallery" id="product2"><a href="#">Link2</a></LI>
</UL>
<DIV class="slider">
<DIV class="handle"></DIV><SPAN class="slider-lbl1">Text1</SPAN>
<SPAN class="slider-lbl2">Text2</SPAN>
</DIV>
</DIV>
</html>