a link to your page would be helpful-
On Feb 25, 9:37 am, Tal <[EMAIL PROTECTED]> wrote:
> 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.
