I have been programming a website with a slider adapted from a coding blog. It worked in chrome but no other browser. I spent most of today resolving the compatibility issue. Found out that i need "webkits".

The problem now is that all the photo's in the slider come down as 1 stack with 4 lots of white background I tested for this with different sized images.

I'm not sure if this is a html issue or css issue. I have put the html code below I'm using a UL list.

HTML Code:
<div id="slider">
        	<div id="mask">
            <ul>
           	<li id="first" class="firstanimation">
            <a href="#">
            <img src="http://what-do-christians-believe.co.uk/wdcb-images/barn-frame.png" alt="Photo: A Finnish farmhouse" title="A finnish farmhouse" />
            </a>
            <div class="tooltip">
            <h1>Finnish Farmhouse</h1>
            </div>
             </li>
             
            <li id="second" class="secondanimation">
            <a href="#">
            <img src="http://what-do-christians-believe.co.uk/wdcb-images/castle-frame.png" alt="Photo: Dover Cstle UK" title="Dover Castle UK" />
            </a>
            <div class="tooltip">
            <h1>Dover Castle</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="http://what-do-christians-believe.co.uk/wdcb-images/fire-eng-frame.png" alt="A Fire engine USA" title="Fire engine USA" />
            </a>
            <div class="tooltip">
            <h1>Fire Engine</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="http://what-do-christians-believe.co.uk/wdcb-images/flklnds-bch-frame.png" alt="Falklands Beach" title="Falklands Beach" />
             </a>
            <div class="tooltip">
            <h1>Falklands Beach</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="http://what-do-christians-believe.co.uk/wdcb-images/seal-frame.png" alt="Harbour Seal" title="Harbour Seal" />
            </a>
            <div class="tooltip">
            <h1>Harbour Seal</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
The css code can be found here

The website is here

How do I get the images to display in sequence?