CODEWITHSUNDEEP
htmlcsspositioning
ricky
ricky

Reputation: 7

slideshow images displaying in wrong position on firefox

my image slideshow is displaying in the correct position on both chrome and explorer, but not with firefox. The images are placed inside the slideshow_box correctly but on firefox they are away up to the top right of the browser. The slideshow works using javascript.

does anyone have any idea why this is?

the html code:

 <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-->

the 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;
 }

any help would be much appreciated :)

Upvotes: 0

Views: 448

Answers (2)

Qiqi Abaziz
Qiqi Abaziz

Reputation: 3353

The .slides ul and the #slideshow_box have difference in height by 62px. If you want to centering the .slides ul inside the container then the bottom value should be in 31px. By the way I think it's better if you define the width value for #slideshow_box also.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

replace to your img tag

Replace this

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

into this

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

here is jsfiddle

Upvotes: 2

Related Questions