jQuery Serialscroll CSS problem

Question

Hi there,

I'm having a terrific problem with an implementation of serialscroll. I've set it so that each list item is 100% width, to get a full screen slideshow going.

You can check out the full code here: http://www.reverenddan.net/so/

The CSS is fairly simple:

#slideshow {
width: 100%;
height:100%;
margin: 0;
padding: 0;
position:absolute;
overflow:hidden;
}

#slideshow ul {
width: 800%;
height:100%;
margin: 0;
padding:0;
}

#slideshow li {
width:12.5%;
height:100%;
margin: 0;
padding: 0;
float:left;
list-style: none;
}

and the corresponding HTML:

<div id="slideshow">
                <ul>
                    <li id="slide1"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                    <li id="slide2"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                    <li id="slide3"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                </ul>
            </div>

It's all working a treat, however if you resize the window on the second or third frames, the list items holding the images seem to resize at a different rate than the browser window, rather than staying centered. I've used a bit of jquery to vertically align the images, but I thought the text-align: center and 100% width would be enough to keep them in place.

Any thoughts would be greatly appreciated, I'm at the end of my tether!

Answer 1

Try changing #slideshow to use a fixed width, relative positioning, and an automatic left and right margin, which should have the effect of centering it (and its content):

#slideshow{
  position: relative;
  height: 100%;
  width: 900px;
  margin: 0 auto;
  padding: 0;
  overflow:hidden;
}

Change the 900px width I suggest above to something smaller if you're not going to be using images that wide.