изображения слайд-шоу, отображаемые в неправильном положении на firefox

Question

мое слайд-шоу изображений отображается в правильном положении как на хроме, так и на проводнике, но не на firefox. Изображения помещаются внутри slideshow_box правильно, но по firefox они находятся в верхнем правом углу браузера. Слайд-шоу работает с использованием javascript.

кто-нибудь не знает, почему это так?

HTML-код:

<div id="slideshow_box" class="clear"> 
      <div class="slides"> 
       <ul> 
        <li><a href="#"><img src="images/buses.jpg" alt="bus in clydebank" </a></li> 
        <li><a href="#"><img src="images/school_work.jpg" alt="school" </a></li> 
        <li><a href="#"><img src="images/haven.jpg" alt="the haven kilmacolm" </a></li> 
       </ul> 
      </div><!--slides--> 
    </div><!--slideshow_box--> 

CSS-код:

#slideshow_box { 
background: url(../images/slideshow-box.png) no-repeat; height: 312px; margin: 20px auto; 
} 

#slideshow_box .slides ul { 
list-style:none; position:relative; bottom: 50px; left: 40px; width: 750px; height: 250px; overflow: hidden; 
} 

любая помощь была бы оценена :)

Answer 1

заменить на свой IMG тег

Заменить этот

<li><a href="#"><img src="images/buses.jpg" alt="bus in clydebank" </a></li> 

в этом

<li><a href="#"><img src="images/buses.jpg" alt="bus in clydebank"/> </a></li> 

здесь jsfiddle

Answer 2

.slides ul и #slideshow_box имеют разницу в высоте по 62px. Если вы хотите центрировать .slides ul внутри контейнера, то нижнее значение должно быть в 31px. Кстати, я думаю, что лучше определить значение ширины для #slideshow_box.