Positioning the Belt in Carousel Viewer

[slabadie]

1) Script Title: Step Carousel Viewer

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

3) Describe problem: Having trouble position the belt on my page. This is a link to the static page of what it should look like http://www4.esu.edu/mascot/index.htm and here is the link to the page with the script on it http://www4.esu.edu/mascot/scroller5/index.htm. There is also a conflict between Firefox and IE. Any help or guidence would be appreciated.

[Nile]

This is because the belt has an absolute positioning - i think - somewhere in its script. I don't know how to fix it though.

[slabadie]

Yes, you are right, but the absolute position is set to zero (0) and the relative position does not have a position. If I add numbers other than zero (0) it doesn't move.

[ddadmin]

I'll take a look at this later today.

[slabadie]

OK thank you

[slabadie]

Sorry to be a pest, Just wondering when you will have an opportunity to check this out.

[Minos]

I took a look, and preliminarily, it may be that the issues lie within your styles.css rather than the script itself...I'm gonna play with it, see if I can't get you a solution

[ddadmin]

Sorry for the delay. I've tried a few things, to no avail. The two nav butons on both ends of the Carousel viewer does seem to be the culprit somehow, I agree with Minos. I'll post an update once I try recreating a similar interface from scratch. Should be later today or tomorrow.

[slabadie]

Thank you both for your attention to this.

[Minos]

Okay, it took a bit of tweaking, but I've got something that works.

Problem #1 - Picbox. The way float:left works, a div that has this property will butt up it's left edge with the previous div with float:left. In this case, picbox. I couldn't find an easy way to include picbox in the solution, but to get the same effect:

I. Remove picbox.
II. Add

padding: 2px;
border: 1px solid #8B846A;

to .stepcarousel .panel css block (in index.html). Keep in mind you need to adjust your sizes accordingly, panel width of 121px and stepcarousel height of 90px worked for me.

Problem #2 - Once you solve that issue, you see that arr-left is the previous float:left, so, we need to fix that.

I: Add float:left; to the .stepcarousel css block (in index.html)
II: The spacing is a little off, picbar width of 411px, arr-right margin-left of 10px, and stepcarousel panel margin of 5px seems to work well.

I *think* that's all you need, lemme know if I left something out.

-M.