ff Problem Content Slider 2.4

[Kanikkl]

1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.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>