Question

I’ve got 3 images that rotate on a home page. One image is shown at a time, and there are 3 dots below the image to indicate whether it is the first, second, or third image.

The dots are supposed to be clickable, but they aren’t.

Here’s the css:

.body, html {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:300;background:#fff; background: url('http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/headerImage4.png');background-repeat:repeat-x;width:100%;  margin:0; padding:0; }

.container{
    margin:0;
    padding:0;
    width:100%;
    height:100%;

    background-color:#ffffff;
}

.header {max-height: 100px}

.logo img {width:90%; min-height: 65px; max-width:400px; margin:0.5% 2% 1% 7%; float:left;}

.recLogo img {max-height: 140px; margin:0.5% 2% 1% 7%; float:left;}


.headlineContainer {display:block; width:80%; margin:0; position:relative; right:25%; font-weight:bold;}
.headline {margin:0;}

.nav {width:55%; margin:3.2% 0 0 0; float:left; max-height:100px}

.nav ul {}

.nav li {display:inline; height:30px; float:left; list-style:none; margin: 0 4.43668% 0 0;font-weight:bold}

.menu li a {text-decoration:none; color:#000; font-family:helvetica, arial, sans-serif; font-weight:regular;}

.menu li a:hover {color:#FFF}

.menu {float:right; margin:0 5% 0 0}

.current_page_item a:visited {color:#fff;}

.white {background-color:#fff;  background:url('http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/headerImage4.png'); background-repeat:no-repeat; width:100%}

.promos {clear:both; width:80%; display:block; padding:5% auto 0 auto; margin: 0 auto; background-color:#fff; position:relative;bottom:2em; z-index:-1}

.rslides_tabs a {
background:#fff !important;
border: 2px solid !important;
border-color:#cccccc !important;
z-index:9 !important;
}

.rslides_tabs .rslides_here a {
background: #EE7600 !important;
border: 2px solid !important;
border-color:#cccccc !important;
z-index:9 !important;
}

The page can be seen at http://www.ayrturfandtrac.org/

Do you have any ideas on how to fix these three buttons?

Answer 1

You are exactly right that the z-index: -1 on the .promos class is causing the issue, as it is pushing the slide show behind the .white containing block and causing the clicks not to register.

You need to reconfigure how you have your html and css set up, so that the “header” area is truely its own element that contains your red background and drop shadow along with logo and navigation, which then itself can be set with a z-index higher than the slide show container. This keeps the slide show at a normal z-index, and as long as you do not have the header overlap the slide show any more than the size of the drop shadow, your click functionality should work on it.