Mystery missing images javascript problem

[maxihobbs]

This is a head scratcher for me, im doing a site for a client which includes an image slider.

 

In firefox all works fine but in all other browsers there are three missing image icons at the bottom of the image when you hover over it. I've gone through all the code changing bits to try and make them disappear the javascript and css are shown below. Basically I want these 3 missing image icons gone so it appears as it does in firefox with a caption at the top and the number of images appearing at the bottom without the image icons, thanks in advance

 

JAVASCRIPT

 

<script type="text/javascript">

var mygallery=new simpleGallery({

wrapperid: "llanrumney",

dimensions: [440, 200],

imagearray: [

["images/firsts_gallery.jpg", "", "", " First's"],

["images/thirds_gallery.jpg", "", "", " Third's"],

["images/oldboys_gallery.jpg", "", "", " Old Boys"],

],

autoplay: [true, 2500, 4],

persist: false,

fadeduration: 500,

oninit:function(){

 

},

onslide:function(curslide, i){

 

}

})

</script>

 

CSS

 

#gallery-wrapper {

width: 400px;

height: 200px;

margin-bottom: 20px;

}

 

#gallery

{

width: 200px;

}

 

#gallery img.output

{

width: 604px;

height: 375px;

margin-bottom: 6px;

margin-left: 4px;

border: solid 5px #FFE3B5;

}

 

#gallery span.caption

{

display: block;

margin: 1em 0 1em 0;

}

 

#thumbnail-bg {

background: #F3F0E6;

}

 

#gallery ul.thumbnails

{

width: 100%;

list-style: none;

margin: 0;

padding: 0 0 0 5px;

}

 

#gallery ul.thumbnails li

{

float: left;

margin: 0 8px 1em 0;

}

 

 

#gallery ul.thumbnails li img.active

{

border: solid 5px #FFC15E;

}

 

.transparent {

 

}

 

PS - THE LINK IS www.maxihobbs.com/llanrumney