jQuery "Cycle" plugin causing content to not center, how can I fix this?

Question

Hi,

I'm trying to use the jQuery "Cycle" plugin (http://jquery.malsup.com/cycle/) to rotate testimonials located within <span>s ... however the plugin is causing my content to not be centered. Yesterday morning someone here pointed out the <span> elements are being absolutely positioned by the plugin: $slides.css({position: 'absolute', top:0, left:0}).hide()

I don't know JS and I'm still working on my HTML/CSS, so I was hoping someone here knew a fix for this and could help me. If not oh well :/

I've tried adding left:50% and although it centers, the slide is broken and all my <span>s appear at once.

[Edit]

Here's the HTML & CSS:

<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
}

Alone, everything works as planned. Then I add the jQuery/Cycle plugin:

// set position and zIndex on all the slides
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
        var z;
        if (opts.backwards)
            z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
        else
            z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
        $(this).css('z-index', z)
    });

This is what screws it all up. As is, the <span> s are shown one at a time and fade in and out like they're supposed to, except the text isn't centered anymore due to the absolute positioning. So I changed left:0 to left:50% - wha la! Problem solved text is centered, except NOW the spans are all shown at the same time and there's no fading in/out.

Answer 1

Without the code this isn't easy to call but I assume the testimonials are within a block element of some sort. If you apply position:relative to that element the absolutely positioned <span>s will be contained within. You shouldn't really apply any positioning styles to the spans themselves - rather leave that to the plugin.

Hope that helps

---

EDIT

Okay try this:

.slideshow {
    width:940px;
    height:64px;
    background-image:url(../images/quotes.png);
    position:relative;
    }

.slideshow span {
    display:block;
    }

You may need to manually set the width of the <spans>s as well to match the width of the div.slideshow