Pure CSS slider left margin accretion

Question

I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.

I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.

Any pointers would be appreciated!

The site this can be seen on is http://www.darkmatter-designs.com/

Answer 1

As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>

I know, it's weird.

Answer 2

I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it.. But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..