PDA

View Full Version : ff Problem Content Slider 2.4



Kanikkl
01-26-2011, 02:03 PM
1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: I get a problem on the following Homepage: www.2k-rage.com - The pagination Slider div is getting a problem in FF, but iE and chrome handle it fine. First and Second button (class named toc for all 5 buttons) are displayed in their correct way (missinterpretation of <a> tag, maybe someone could help with this as well, same thing happens in the navigation, div is not linked -> only the text), but the 3th - 5th buttonsī text isnt displayed.


Stylesheet:

/*CONTENTSLIDER*/
#slider1{
height: 160px;
width: 550px;
z-index: 1;
}

#slider1 div.contentdiv{
height: 160px;
width: 550px;
position:absolute;
z-index: 1;
}

#slider1 div.shaddow{
background: url(images/contentslider/contentslider_shaddow.png);
width: 550px;
height: 160px;
position:absolute;
z-index: 2;
}

#slider1 div.font{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;

color: #FFF;

width: 370px;
height: 22px;
margin-left: 20px;
margin-top: 136px;

position:absolute;
}

#paginate-slider1 ul {
padding: 0px;
margin: 0px;
}

#paginate-slider1 li{
width: 28px;
height: 26px;
margin-left: 3px;
margin-right: 1px;
float: left;
list-style: none;
background: none;
position: relative;
}
#paginate-slider1 li:hover, #paginate-slider1 a.selected li{
background: url(images/contentslider/button.png);
text-shadow: #444 0px -1px 0px;
color: #FFF;
}
#paginate-slider1 ul a:hover{
text-shadow: #444 0px -1px 0px;
color: #FFF;
}

#paginate-slider1 a{
color: #4c4c4c;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-shadow: black 0px 0px 0px;
}

#paginate-slider1 div.buttontext{
margin-top: 5px;
text-align: center;
}

div.paginate_position{
margin-top: -28px;
margin-left: 390px;
position: absolute;
z-index: 999;

}
/* CONTENTSLIDER END*/

CONTENT:
<div id="slider1" class="sliderwrapper">
<div class="contentdiv" style="background: url(images/contentslider/contentslider_01.png);"><div class="shaddow">
<div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
</div></div>

<div class="contentdiv" style="background: url(images/contentslider/contentslider_02.png);"><div class="shaddow">
<div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
</div></div>

<div class="contentdiv" style="background: url(images/contentslider/contentslider_03.png);"><div class="shaddow">
<div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
</div></div>

<div class="contentdiv" style="background: url(images/contentslider/contentslider_04.png);"><div class="shaddow">
<div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
</div></div>

<div class="contentdiv" style="background: url(images/contentslider/contentslider_05.png);"><div class="shaddow">
<div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
</div></div>
</div>

<div class="paginate_position">
<div id="paginate-slider1">
<ul>
<a href="#" class="toc"><li><div class="buttontext">1</div></li></a>
<a href="#" class="toc"><li><div class="buttontext">2</div></li></a>
<a href="#" class="toc"><li><div class="buttontext">3</div></li></a>
<a href="#" class="toc"><li><div class="buttontext">4</div></li></a>
<a href="#" class="toc"><li><div class="buttontext">5</div></li></a>
</ul>
</div>
</div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>

Hopefully someone can help.

//EDIT: SOLVED IT -> before: <a><li><div></...a> AFTER: <li><a><div></...a>