Pure HTML/CSS image slider looks different on other browsers than firefox - html

Question

I just created a image slider and when I opened the slider in chrome and safari the 3 navigation buttons on the bottom of the slider didn't show up. Here is the code http://cssdeck.com/labs/full/ivxl7z5k
EDIT: slider works in all browsers now, but the red bar on top of the slider is still there. If anyone could tell me what I need to edit in the code to remove the gap i would appreciate it
HTML code:
<div id="slides">
<input checked type="radio" name="slider" id="slide1" class="set" />
<input type="radio" name="slider" id="slide2" class="set" />
<input type="radio" name="slider" id="slide3" class="set" />
<div class="mask">
<div class="overflow">
<div class="slide">
<img src="images/slideshow1.jpg">
</div>
<div class="slide">
<img src="images/slideshow2.jpg">
</div>
<div class="slide">
<img src="images/slideshow3.jpg">
</div>
</div>
</div>
<div id="controls" onclick="">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
</div>
CSS code:
#slides {
position:absolute;
width:1024px;
height: 525px;
margin: 0;
padding: 0;
left: 256px;
background: #ddd;
}
#slides input {
position: relative;
left: 30px;
top: 500px;
}
#slides .mask {
width:1024px;
overflow:hidden;
margin:auto;
}
#slides .overflow {
width:400%;
-webkit-transform:translateZ(0);
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
#slides .slide {
width: 1024px;
height: 525px;
float:left;
background:#fff;
#controls { width:100%; }
#controls label {
display:none;
width:5%;
height:60px;
opacity:0.3;
position:absolute;
top:50%;
margin-top:-30px;
cursor:pointer;
background:#000;
}
#controls label:hover { opacity:0.8; }
#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3);
#slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2);

Answer 1

Try z-index for your radio buttons. For example in their css add z-index:100.
#slides input {
position: relative;
left: 30px;
top: 500px;
z-index:100;
}