no worries, i solved it.
apparently in Mozilla FF the file order needed to be exactly as it is
in the example files i.e. javascript files filrst and then the css
file and then the extra javascript that you would put for
customization.
also i changed the DOCTYPE to transitional fro strict. i dont know if
that helped at all but thats how it is in the examples.
anyways, that did the trick.
needless to say IE is much more forgiving and is much easier to design
for.
Ciao,
Tal.
On Feb 13, 3:58 pm, Tal <talor...@gmail.com> wrote:
> Hi guys,
>
> In IE7 my jcarousel works perfectly however in Mozilla FF it remains
> vertical, show the list bullets, does not show the arrows and on top
> of all, when i try to throw it off by doing something drastic to the
> CSS files it shows no effect at all.
>
> It seems to me like its not rendering the files at all.
>
> I'm using the Tango skin.
>
> Any ideas?
>
> here is my CSS:
>
> jquery.jcarousel.css
>
> [css]
>
> /**
> * This <div> element is wrapped by jCarousel around the list
> * and has the classname "jcarousel-container".
> */
> .jcarousel-container{ position : relative; }
>
> .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-list li, .jcarousel-item
> {
> float : left;
> list-style : none;
> /* We set the width/height explicitly. No width/height causes
> infinite loops. */
> width : 123px;
> height : 120px;
> text-align : center;
>
> }
>
> /**
> * 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
> {
> z-index : 3;
> display : none;
>
> }
>
> .jcarousel-prev
> {
> z-index : 3;
> display : none;
>
> }
>
> [/css]
>
> skin.css
>
> [css]
>
> .jcarousel-skin-tango .jcarousel-container
> {
> -moz-border-radius : 10px;
> background-color : #FFFFFF;
>
> }
>
> .jcarousel-skin-tango .jcarousel-container-horizontal
> {
> width : 500px;
> padding : 20px 40px;
>
> }
>
> .jcarousel-skin-tango .jcarousel-container-vertical
> {
> width : 75px;
> height : 500px;
> padding : 40px 20px;
>
> }
>
> .jcarousel-skin-tango .jcarousel-clip-horizontal
> {
> width : 500px;
> height : 120px;
>
> }
>
> .jcarousel-skin-tango .jcarousel-clip-vertical
> {
> width : 100px;
> height : 500px;
>
> }
>
> .jcarousel-skin-tango .jcarousel-item
> {
> width : 123px;
> height : 120px;
> text-align : center;
>
> }
>
> .jcarousel-skin-tango .jcarousel-item-horizontal{ margin-right :
> 0px; }
>
> .jcarousel-skin-tango .jcarousel-item-vertical{ margin-bottom :
> 10px; }
>
> .jcarousel-skin-tango .jcarousel-item-placeholder
> {
> background-color : #FFFFFF;
> color : #000000;
>
> }
>
> /**
> * Horizontal Buttons
> */
> .jcarousel-skin-tango .jcarousel-next-horizontal
> {
> position : absolute;
> top : 60px;
> 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 : 60px;
> 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]
>
> here is my HTML:
>
> [html]
> <div id="mycarousel" class="jcarousel-skin-tango">
> <ul>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> <li><img src="images/new/scroller/
> S5001257.jpg" alt="Something" title="Something" onClick="javascript:
> window.open('images/new/scroller/S5001257.JPG', '', 'menubar=no,
> resizable=yes, status=no, toolbar=no, scrollbars=yes, top=0, left=0,
> width=640, height=500');"></li>
> </ul>
> </div>
> [/html]
