Carousel Position Problem

[Galil]

1) Script Title: Step Carousel
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem:

I embedded a step caraousel viewer in my document. It gets really strange positions, which means its always on the right. Even if i try to center it with margin-left: auto; and margin-right: auto; it isnt centered. Does anyone have an idea?

<div id="port2">

       
<div id="slider" class="stepcarousel">
<div class="belt">


<div class="slidepanel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>

<div class="slidepanel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>

<div class="slidepanel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>

<div class="slidepanel">
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>

<div class="slidepanel">
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</div>

</div>
</div>



<p id="slider-paginate" style="width: 250px; text-align:center">
<img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
</p>

<p>
<a href="javascript:stepcarousel.stepBy('slider', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('slider', 1)">Forward 1 Panel</a> <br />

<a href="javascript:stepcarousel.stepTo('slider', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('slider', 2)">Forward 2 Panels</a>
</p>

</div>

the css

#port2 {position:relative; width:100%; left:100%;-webkit-transition: 0.4s ease-in-out;-moz-transition: 0.4s ease-in-out;-o-transition: 0.4s ease-in-out;transition: 0.4s ease-in-out;}



.stepcarousel{
position: relative; /*leave this value alone*/

overflow: scroll; /*leave this value alone*/
width: 600px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
margin-left:auto;
margin-right:auto;
}

.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 around each panel*/
width: 600px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

[bernie1227]

Have you tried positioning the whole thing with CSS? It appears to be positioned relatively, so try something like:

left: -100px;

Inside the CSS for stepcarousel. Tell us if that moves it at all.