Recently, I integrated an image slider into my web design and it displayed perfectly on Internet Explorer and Chrome. However, when viewed on Firefox, I encountered a strange problem where the images in the slider were being pushed towards the right side of the page.
The desired layout should look like this:
I am puzzled as to why this anomaly is happening. Here is the CSS code for the slider:
<style type="text/css">
#slider {
position: relative;
width: 918px;
}
#slider .viewer {
position: relative;
width: 918px;
height: 200px;
overflow: hidden !important;
}
#slider .viewer .reel {
display: none;
height: 200px;
}
#slider .viewer .reel .slide {
width: 918px;
height: 200px;
}
</style>
Furthermore, here is the CSS code for the container enclosing the slider:
#photobox {
border-left: 1px solid #ababab;
border-right: 1px solid #ababab;
position: relative;
width: 918px;
height: 200px;
z-index: -1;
top: -6px;
}
This issue has me totally perplexed. To see the live version of the website, you can visit