Question

I’m having some problems with a content slider. I am using the jQuery.Cycle plugin and I have set up all the code to get the slider working with a custom pager. However, I am having a problem with the HTML. When viewed in IE 8, the pager buttons work fine, you can click next, previous, and click the image buttons in the pager to move to a specific slide. When viewed in FireFox, the entire image is not clickable! Only the bottom row of pixels for each image will activate a clickable area.

You can view all the pertinent code at [removed] But I’ll highlight the most relevant parts here:

CSS:

#slider_nav {
    text-align: center;
}

#slider_nav img {
    margin-top: 1px;
    margin-left: 10px;
    margin-right: 10px;
}

#slider_pager {
    display: inline;
}

HTML

<div id="sliderControls">
    <div class="content">
        <div id="slider_nav">
            <a href="#" id="slider_prev"><img src="/images/slider_arrow_l.png" alt="slider previous button" /></a>
            <div id="slider_pager">
                        <!--- Generated by JQCycle --->
                        <a href="#"><img src="/images/sliderActive.png" /></a>
                        <a href="#"><img src="/images/sliderInactive.png" /></a>
                        <!--- End generated code --->
            </div>
            <a href="#" id="slider_next"><img src="/images/slider_arrow_r.png" alt="slider next button" /></a>
        </div>
    </div>
</div>

Thanks!

Answer 1

The issue is that the #slider is positioned relatively and is overlapping the sliderControls. I was able to fix it by removing the bottom padding on #slider.

#slider {
   padding: 20px 20px 0 20px;
   height: 205px;
}