Step Carousel help

[colinod]

I am using StepCarousel on my page but have it hidden in a span until the span is viewed, i can get the carousel to hide but the buttons do not hide, i think this is a css problem.

css for carousel is as follows

<style type="text/css">
 
.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 600px; /*Width of Carousel Viewer itself*/
height: 100px; /*Height should enough to fit largest content's height*/
}
 
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
 
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 125px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>

this is the used in the following code

 <span class="voicedesc"><%=yaketyRecordset("voicedesc")%></span><a id="displayText" href="javascript:toggle();" class="moreitalic">&nbsp;Read Biog</a><br>
        <span id="toggleText" style="display: none" class="biotext"><div id="mygallery" class="stepcarousel" align="center">
<div class="belt">
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=11" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/waldhorn/kwik fit.jpg" Title="Kwik Fit - Gary Waldhorn" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=12" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/adams/shape.jpg" Title="Shape - Kelly Adams" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=13" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/degas/nestle.jpg" Title="Nestle - Rupert Degas" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=14" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/elliott/johnson.jpg" Title="Johnson & Johnson 24 Hour Moisture Body Lotion - Jonell Elliott" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=8" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/ashby/mr kipling.jpg" Title="Mr Kipling - Robert Ashby" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=10" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/evans/viking.jpg" Title="Viking - Chris Evans" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=3" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/yorke/Happy Meals Mudpuddle.jpg" Title="McDonalds Happy Meals - Stephen Alan Yorke" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=6" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/kaye/hyundai.jpg" Title="Hyundai - Paul Kaye" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=4" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/buffery/Digital UK.jpg" Title="Digital UK - Kate Buffery" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=5" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/brown/freeview rugby world cup.jpg" Title="Freeview Rugby World Cup - Warren Brown" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=7" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/webb/sky multiroom.jpg" Title="Sky Multiroom - Niamh Webb" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=9" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/piper/debenhams.jpg" Title="Debenhams - Billie Piper" border="0" /></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=1" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/long/snickers.jpg" Title="Snickers - Jordan Long" border="0"/></a>
</div>
 
<div class="panel">
<a href="http://bytes.com/submit/recentwork/recent.asp?clipid=2" class="lytebox" data-title="" data-lyte-options="width:600 height:460 scrollbars:no" target="_blank"><img src="http://bytes.com/submit/search/williams/loctite.jpg" Title="Loctite - Lee Williams" border="0" /></a>
</div>
 
</div>
</div>
</span>

All works fine except the buttons appear in the top left corner of the page??

http://www.yaketyyakallmouth.com/pag...&voicetype=All

[drhowarddrfine]

The CSS is telling it to be there:

left:-5px;
top:40px;
 

[colinod]

but if i remove it from withing the spans that it is currently in it puts the either side of the carousel????

[drhowarddrfine]

I'm not saying remove it from the span. I'm saying the CSS is putting it where it is. If you remove 'position:absolute' you'll see it goes back to the bottom.

[colinod]

thanks for that i realise the CSS is putting it where it is my problem is i cant get the CSS to position it where i want it, if i remove the position:absolute nothing changes apart from the buttons stop working