issues with a javascript slider in firefox

Question

i'm struggling to find a solution to this anywhere. I have created a slider that works perfectly in Safari but when i view it in Firefox slider image 1 has no margin in between slider image 2 and neither 2 with 3 and so on. Creating a train of images that never quite fit in the slider window(almost like a lift opening at random points between floors).

second problem i'm having is creating the slider image as the link as apposed to just the .content h2 title being the link.

The slider is in Wordpress Epione theme.

any help would be greatly appreciated

this is my css-

/*SLIDER*/

#sliderwrap{float:left; width:auto; height:auto; background:none; margin-left:0px;        margin-top:px; position:; z-index:3;}

.slidercontent{ margin-top:20px;width:auto; height:auto;}

#slider{ margin-left:0px; margin-top:0px; width:auto; height:auto;}



.content{ width:auto; margin-right:auto;}

.content p{ font-style:none; font-size:14px;}

.content h2{ position: relative; left: -650px; top:490px; font-family: 'helvetica;      colour:#00000; font-size:10px; margin-bottom:15px; margin-top:20px;display:}

.content h2 a{ color:#00000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}



#slider img{width:auto; height:auto; ; margin-left:0px; margin-top:22px; min-height:225px; }

.sframe{ background:url(images/sliderimg.png) no-repeat; float:center; ; height:auto; float:center; position:; z-index:0; margin-top:12px; margin-left:60px;}


.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}



/* Easy Slider */

#slider ul, #slider li{margin:0;padding:0;list-style:none;}

#slider li, #slider2 li{ width:1000px;height:1100px} 



#nextBtn{display:block; width:13px; height:14px; position:relative; left0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }

#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }  


#prevBtn{ left:-20px;}              
#nextBtn a, #prevBtn a{  display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;} 

#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}

.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}


/* Easy Slider END */

/*SLIDER END*/

and the front-page where the .php appears

<?php get_header(); ?>



<!--SLIDER-->

<div id="sliderwrap">

">

</div>

<div class="sl_control"></div>

<!--SLIDER END-->



<!--CONTENT-->

















</div>

</div>

<!--CONTENT END-->





<!--SIDEBAR-->



<?php get_sidebar(); ?>



<!--SIDEBAR END-->



</div>

<!--Footer-->

<?php get_footer(); ?>

Could you post the generated HTML? The PHP doesn't really matter in this case. — Damien

aendra aendra · Accepted Answer · 2010-11-24T01:02:51

First of all:

Your CSS doesn't validate and I'm guessing Firefox is having issues parsing it as such. Try copying and pasting that snippet into http://jigsaw.w3.org/css-validator/ to see what I mean. Below is some (somewhat) corrected CSS:

/* SLIDER */


#sliderwrap {float: left; width: auto; height: auto; background: none; margin-left: 0px; z-index: 3;}

.slidercontent {margin-top:20px; width:auto; height:auto;}

#slider {margin-left: 0px; margin-top: 0px; width: auto; height: auto;}

.content{ width:auto; margin-right:auto;}

.content p{ font-style:none; font-size:14px;}

.content h2{ position: relative; left: -650px; top:490px; font-family: sans-serif;      colour: #000000; font-size:10px; margin-bottom:15px; margin-top:20px;}

.content h2 a{ color:#000000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}

#slider img{width:auto; height:auto; margin-left:0px; margin-top:22px; min-height:225px; }

.sframe{ background:url(images/sliderimg.png) no-repeat; height:auto; float:center; z-index:0; margin-top:12px; margin-left:60px;}

.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}


/* Easy Slider */

#slider ul, #slider li{margin:0;padding:0;list-style:none;}

#slider li, #slider2 li{ width:1000px;height:1100px;} 



#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }

#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }  

#prevBtn{ left:-20px;}              
#nextBtn a, #prevBtn a{  display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;} 

#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}

.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}


/* Easy Slider END */

/*SLIDER END*/

Note that this still won't parse for a couple of reasons -- first of all, float is either "left" or "right"; you can't do it "center". To do that with floats, you need to do things like "margin-left: 50%;" Secondly, fonts are always styled in some way -- you can't declare font-style as "none". I've left those in the above because I'm not sure how you want to deal with that.

Regardless, you can fork to different stylesheets based on browser in PHP; see: http://php.about.com/od/learnphp/p/http_user_agent.htm

Hope this helps!

-æ.

issues with a javascript slider in firefox

">

1 Answers