Hi all, I mannaged to get the JCarousel working perfectly in IE but in Firefox Mozilla the previous and next arrow buttons dont show.
Im using the static_controls.html model from the examples and the tango skin. here is my CSS followed by the HTML jquery.jcarousel.css [css] /** * This <div> element is wrapped by jCarousel around the list * and has the classname "jcarousel-container". */ /*#mycarousel{ display : none; }*/ .jcarousel-container{ position : relative; border:1px solid #000000; } .jcarousel-clip { z-index : 2; padding : 0; margin : 0; overflow : hidden; position : relative; } .jcarousel-list { z-index : 1; overflow : hidden; position : relative; top : 0; left : 0; margin : 0; padding : 0; } .jcarousel-item { float : left; list-style : none; /* We set the width/height explicitly. No width/height causes infinite loops. */ width : 115px; height : 115px; cursor : pointer; margin-right : 10px; #margin-right : 0px; } /** * The buttons are added dynamically by jCarousel before * the <ul> list (inside the <div> described above) and * have the classnames "jcarousel-next" and "jcarousel-prev". */ .jcarousel-next { position:relative; float:right; margin-top : 25px; z-index : 3; display : none; border:1px solid #000000; width: 34px; height:34px; } .jcarousel-prev { position:relative; float:left; margin-top : 25px; margin-right:-30px; padding-right:0px; z-index : 3; display : none; border:1px solid #000000; width: 34px; height:34px; } [/css] skin.css [css] .jcarousel-skin-tango.jcarousel-container-horizontal { width : 365px; padding : 0px 40px 0px 40px; } .jcarousel-skin-tango.jcarousel-container-vertical { width : 115px; height : 365px; padding : 40px 0px 40px 0px; } .jcarousel-skin-tango.jcarousel-clip-horizontal { width : 365px; height : 115px; } .jcarousel-skin-tango.jcarousel-clip-vertical { width : 115px; height : 365px; } .jcarousel-skin-tango.jcarousel-item { width : 115px; height : 115px; } .jcarousel-skin-tango.jcarousel-item-horizontal{ margin-right : 10px; } .jcarousel-skin-tango.jcarousel-item-vertical{ margin-bottom : 10px; } .jcarousel-skin-tango.jcarousel-item-placeholder { background : #FFFFFF; color : #000000; } /* Horizontal Buttons */ .jcarousel-skin-tango.jcarousel-next-horizontal { position : absolute; top : 43px; right : 5px; width : 32px; height : 32px; cursor : pointer; background : transparent url(next-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango.jcarousel-next-horizontal:hover{ background- position : -32px 0; } .jcarousel-skin-tango.jcarousel-next-horizontal:active{ background- position : -64px 0; } .jcarousel-skin-tango.jcarousel-next-disabled-horizontal, .jcarousel-skin-tango.jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango.jcarousel-next-disabled-horizontal:active { cursor : default; background-position : -96px 0; } .jcarousel-skin-tango.jcarousel-prev-horizontal { position : absolute; top : 43px; left : 5px; width : 32px; height : 32px; cursor : pointer; background : transparent url(prev-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango.jcarousel-prev-horizontal:hover{ background- position : -32px 0; } .jcarousel-skin-tango.jcarousel-prev-horizontal:active{ background- position : -64px 0; } .jcarousel-skin-tango.jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango.jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango.jcarousel-prev-disabled-horizontal:active { cursor : default; background-position : -96px 0; } /* Vertical Buttons */ .jcarousel-skin-tango.jcarousel-next-vertical { position : absolute; bottom : 5px; left : 43px; width : 32px; height : 32px; cursor : pointer; background : transparent url(next-vertical.png) no-repeat 0 0; } .jcarousel-skin-tango.jcarousel-next-vertical:hover{ background- position : 0 -32px; } .jcarousel-skin-tango.jcarousel-next-vertical:active{ background- position : 0 -64px; } .jcarousel-skin-tango.jcarousel-next-disabled-vertical, .jcarousel-skin-tango.jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango.jcarousel-next-disabled-vertical:active { cursor : default; background-position : 0 -96px; } .jcarousel-skin-tango.jcarousel-prev-vertical { position : absolute; top : 5px; left : 43px; width : 32px; height : 32px; cursor : pointer; background : transparent url(prev-vertical.png) no-repeat 0 0; } .jcarousel-skin-tango.jcarousel-prev-vertical:hover{ background- position : 0 -32px; } .jcarousel-skin-tango.jcarousel-prev-vertical:active{ background- position : 0 -64px; } .jcarousel-skin-tango.jcarousel-prev-disabled-vertical, .jcarousel-skin-tango.jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango.jcarousel-prev-disabled-vertical:active { cursor : default; background-position : 0 -96px; } [/css] [html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>libellus - home</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- jCarousel core stylesheet --> <link rel="stylesheet" type="text/css" href="js/jcarousel/lib/ jquery.jcarousel.css" /> <!-- jCarousel skin stylesheet --> <link rel="stylesheet" type="text/css" href="js/jcarousel/ skins/tango/skin.css" /> <style type="text/css"> <!-- /* Additional styles for the controls. */ .jcarousel-control { width : 365px; margin-bottom : 10px; text-align : center; } .jcarousel-control a { font-size : 75%; text-decoration : none; padding : 0 5px; margin : 0 0 5px 0; border : 1px solid #FFFFFF; color : #EEEEEE; background-color : #05AAE8; font-weight : bold; } .jcarousel-control a:focus, .jcarousel-control a:active, .jcarousel-control a:hover { color : #FC4FF0; font-size : 75%; font-weight : bold; outline : none; } .jcarousel-scroll { width : 365px; margin-top : 10px; text-align : center; } .jcarousel-scroll form { margin : 0; padding : 0; } .jcarousel-scroll select{ font-size : 75%; } a#mycarousel-next ,a#mycarousel-prev { color : #333333; font-family : Arial, "Trebuchet ms", sans-serif; text-decoration : underline; font-size : 11px; font-weight : normal; text-decoration : underline; cursor : pointer; margin-top : 5px; } a:visited#mycarousel-next, a:visited#mycarousel-prev{ color : #666666; } a:active#mycarousel-next, a:active#mycarousel-prev{ color : #FC4FFE; } a:hover#mycarousel-next, a:hover#mycarousel-prev{ color : #00ABEC; } --> </style> <!-- IMAGE SCROLLER ---------------------------------------------------------------------------------------- > <!-- jQuery library --> <script type="text/javascript" src="js/jcarousel/lib/ jquery-1.2.1.pack.js"></script> <!-- jCarousel library --> <script type="text/javascript" src="js/jcarousel/lib/ jquery.jcarousel.pack.js"></script> <script type="text/javascript"> <!-- /* We use the initCallback callback to assign functionality to the controls */ function mycarousel_initCallback(carousel) { jQuery('.jcarousel-control a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); jQuery('.jcarousel-scroll select').bind('change', function() { carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value); return false; }); jQuery('#mycarousel-next').bind('click', function() { carousel.next(); return false; }); jQuery('#mycarousel-prev').bind('click', function() { carousel.prev(); return false; }); }; // Ride the carousel... jQuery(document).ready(function() { jQuery("#mycarousel").jcarousel({ scroll: 3, initCallback: mycarousel_initCallback, // This tells jCarousel NOT to autobuild prev/next buttons buttonNextHTML: null, buttonPrevHTML: null, wrap:"both" }); }); // --> </script> <!---------------------------------------------------------------------------------------------------------- > </head> <body> <div align="center"> <div id="mycarousel" class="jcarousel-skin-tango jcarousel- container"> <div class="jcarousel-control"> <a href="#">1</a> <a href="#">4</a> <a href="#">7</a> </div> <ul> <li><img width="115" height="115" src="http:// static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 75/199481072_b4a0d09597_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 57/199481087_33ae73a8de_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 77/199481108_4359e6b971_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 58/199481143_3c148d9dd3_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 72/199481203_ad4cdcf109_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 58/199481218_264ce20da0_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 69/199481255_fdfe885f87_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 60/199480111_87d4cb3e38_s.jpg" alt="" /></li> <li><img width="115" height="115" src="http://static.flickr.com/ 70/229228324_08223b70fa_s.jpg" alt="" /></li> </ul> <div class="jcarousel-scroll"> <form action=""> <a href="#" id="mycarousel-prev">« Prev</ a> <select> <option value="1">Scroll 1 item per click</ option> <option value="2">Scroll 2 items per click</option> <option value="3">Scroll 3 items per click</option> <option value="4">Scroll 4 items per click</option> <option value="5">Scroll 5 items per click</option> </select> <a href="#" id="mycarousel-next">Next »</ a> </form> </div> </div> </div> </body> </html> [/html] thank you in advance, Tal.