Two issues with Featured Content Slider v2.4

[kca741979]

1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem:

First off my site is
http://www.mulescentral.com

My problem is two-fold
1. I am trying to add a fifth element in the pagination and content DIVs, and it screwed everything up. Things were running smoothly with four, but I tried to add a fifth and not only is the fifth thumbnal image (pagination image) not showing up, but the content DIVs do not match with the corresponding pagination sliders.

2. After that, I was wanting to put a sentence of text to the right of each pagination slider image. An example is here:

http://kuathletics.cstv.com/#00

Any help on those two fronts is greatly appreciated!

[kca741979]

I have the first one fixed....now just need help on the second one....still stumped

[ddadmin]

Well, for the 2nd issue, since you're using "markup" mode to manually define the pagination links' HTML, it's mainly comes down to just modifying that HTML to include text alongside the images:

<div id="paginate-slider1" class="pagination">
<a href="#" class="toc"><img src="images/fhs_11_10_07/29.jpg" width="85" height="63" border="2" /></a>
<a href="#" class="toc"><img src="images/players/alums/DWalker/5.jpg" width="85" height="63" border="2" /></a> 
<a href="#" class="toc"><img src="images/mainart1.gif" width="85" height="63" border="2" /></a> 
<a href="#" class="toc"><img src="images/mainart3.gif" width="85" height="63" border="2" /></a>

<a href="#" class="toc"><img src="images/players/alums/CWearher/weatherington22.jpg" width="85" height="63" border="2" /></a>
</div>

Perhaps modify the above to something like:

<style type="text/css">

.tocboxes{
float: left;
width: 150px;
}

.tocboxes a img{
float: left;
}

</style>

<div id="paginate-slider1" class="pagination">
<div class="tocboxes"><a href="#" class="toc"><img src="images/fhs_11_10_07/29.jpg" width="85" height="63" border="2" /> Some text</a></div> 
<div class="tocboxes"><a href="#" class="toc"><img src="images/players/alums/DWalker/5.jpg" width="85" height="63" border="2" /> Some text</a></div> 
<div class="tocboxes"><a href="#" class="toc"><img src="images/mainart1.gif" width="85" height="63" border="2" /></a></div> 
<div class="tocboxes"><a href="#" class="toc"><img src="images/mainart3.gif" width="85" height="63" border="2" /></a></div> 
<div class="tocboxes"><a href="#" class="toc"><img src="images/players/alums/CWearher/weatherington22.jpg" width="85" height="63" border="2" /></a></div>
</div>

I think you get the idea.

[kca741979]

Thanks a bunch......I have it all set up, but I am now having visual differences on the pagination between IE and Firefox. Everything looks fine in IE but FF looks very different.

Can anyone lend advice on how to fix that?

[jscheuer1]

<div id="paginate-slider1" class="pagination">

<div class="tocboxes">
	<b>
	<a rel="1" href="#" class="toc">
	<font style="font-size: 7pt; font-weight: 700; text-decoration: none;" color="#ffffff" face="Verdana">
	<img src="images/players/alums/DWalker/5.jpg" border="2" height="48" hspace="5" vspace="5" width="65">Walker Catching On In 'Frisco</font></a></b></div> 
<div class="tocboxes">
	<b>
	<a rel="2" href="#" class="toc">
	<font style="font-size: 7pt;" color="#ffffff" face="Verdana">
	<img src="images/mainart1.gif" border="2" height="48" hspace="5" vspace="5" width="65"><span style="text-decoration: none; font-weight: 700;">UCM Golf Classic Coming</span></font></a></b></div> 
<div class="tocboxes">
	<b>
	<a rel="3" href="#" class="toc">
	<font style="font-size: 7pt;" color="#ffffff" face="Verdana">
	<img src="images/mainart3.gif" border="2" height="48" hspace="5" vspace="5" width="65"><span style="text-decoration: none; font-weight: 700;">Check Out Our Forums!</span></font></a></b></div> 
<div class="tocboxes">
	<b>
	<a rel="4" href="#" class="toc selected">
	<font style="font-size: 7pt;" color="#ffffff" face="Verdana">
	<img src="images/players/alums/CWearher/weatherington22.jpg" border="2" height="48" hspace="5" vspace="5" width="65"><span style="text-decoration: none; font-weight: 700;">Former 
	Mule Gets Award</span></font></a></b></div><div style="clear:left;"></div>
</div>

Also, as things will still look bad in some browsers, add this style:

<style type="text/css">

.tocboxes{
float: left;
width: 150px;
text-align: left;
background: #000000;
}
.tocboxes a {
display:block;
text-decoration:none;
}
.tocboxes a img{
float: left;
}

</style>

[kca741979]

Thanks a lot!