Question

I currently have a small slideshow on my webpage that is being powered by jQuery.

When I test my webpage in Firefox the slideshow is lined up exactly where I want it. However, in Safari and Chrome the slide show is offset by about 15px.

The images are retrieved in my HTML through a normal unordered list. As shown below:

<div class="slideshow">
     <ul>
         <li><img src="Images/slideshow/1.png" alt="LXA 1" /></li>
         <li><img src="Images/slideshow/2.png" alt="LXA 2" /></li>
         <li><img src="Images/slideshow/3.png" alt="LXA 3" /></li>
         <li><img src="Images/slideshow/4.png" alt="LXA 4" /></li>
         <li><img src="Images/slideshow/5.png" alt="LXA 5" /></li>
     </ul>
</div>

The CSS for the slideshow class is:

.slideshow-div{
    width:1040px;
    padding-left:325px;
    padding-top:0px;
    height:287px;   
    background-image: url('../Images/slideshow-background.jpg');
    background-repeat: no-repeat;
}

And of course when I downloaded the jQuery plugin I got a seperate CSS file to go with it. But I won’t include it here.

I am aware that things act differently in different browsers. But this is my first time I have had to work with it. So I am unsure how to protect against that.

Answer 1

Have you checked with “Firebug” what causes the offset? I know some browsers give uls margin-left while others give them padding-left – perhaps you forgot to reset both?