[jQuery] please, please, please, please, please, help me with this
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
----------------------------------------------------------------------------------------