jquery Script - rotating images not fully contained

I am trying to use a jquery script ( JQuery Cycle Plugin ) to give rotating pictures (the central picture within the black band). I've got it working on a temporary site (NOTE TEMPORARY PAGE NOW DELETED AS PROBLEM SOLVED - SEE POSTS BELOW)

The problem is that in ie6 (worst) and sometimes in ie7 and firefox, you can see the rotating pictures all in a line underneath each other until the script kicks in and rotates them. This usually happens every time you go from one page to another.

I have tried setting the height of the container to the height of the images (247) within the head section:

and I have also defined the heght and width of the container within my css:

Does anyone know how to fix this? I would love to use this script but it's not looking very professional at the moment.

I think you should decrease the height value of the #mastheadsection selector, so the image under the slideshow won't be visible. Please test the code below.

Code (text):

#mastheadsection {
height:423px;
overflow:hidden;

position:relative;
width:950px;


}
 

Many thanks Zoli - exactly the tip I needed. It sounds obvious once you say it, but I hadn't realised I could have a overflow: hidden for a div!

As soon as my server is up (having problems at the moment), I will delete the temporary page and upload changes to the web design page in my signature link.

Thanks again.