On my website, I currently have a small slideshow implemented using jQuery. When viewing my webpage in Firefox, the slideshow appears perfectly aligned. However, when I check it in Safari and Chrome, I notice that the slideshow is offset by about 15px.
The images for the slideshow are fetched in my HTML using an unordered list like so:
<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 styling for the slideshow class is as follows:
.slideshow-div{
width:1040px;
padding-left:325px;
padding-top:0px;
height:287px;
background-image: url('../Images/slideshow-background.jpg');
background-repeat: no-repeat;
}
Additionally, I have downloaded a jQuery plugin along with a separate CSS file that accompanies it.
Understanding that browsers may render elements differently, particularly in my case involving my first time working with such complexities, I am unsure how to ensure consistent display across all browsers.