Jquery Cycle plugin: first image appears floating right

Question

I have installed the JQuery Cycle Plugin on my site and it works fine but for the first image which appears floating off to the right when the page loads. This just happens to the first image - all others are ok.

I am not sure why this is occurring as all my code is very simple:

$(function() {
  $('#banner').cycle('fade');
});

<div id="banner">
    <img src="images/banner01.jpg"  />
    <img src="images/banner02.jpg"  />
    <img src="images/banner03.jpg"  />
    <img src="images/banner04.jpg"  />
    <img src="images/banner05.jpg"  />
  </div>

#banner
{
    width: 750px;
    text-align: center;
    height: 370px;
    margin: auto;
    margin-top: 20px;
}

#banner IMG
{
    width: 750px;
    height: 320px;
}

I am not sure what I have done wrong or what I can do to fix it. Would anyone know?

The site is here if you want to look: http://austin7.org.au/

EDIT: I have tried moving the JQuery script to the bottom of the page too, to no affect. Also, I have tried using different images - they all have the same result.

Answer 1

Set the left to 0.

#banner img{
    left: 0;
}