Question

i have the below code in a footer and for some reason this part:

<!-- save -->
        <div id="saveWrapper">  
            <div id="save">  
                <img src="img/save.png" alt="Save Image" width="32" height="32" id="saveButton" title="Save Image" />  
            </div>  
            <div id="textdownload">   
                <img src="img/cancel.png" alt="Cancel" width="32" height="32" id="resetButton" title="Continue Drawing" /> 
                Right click the image to download.  
            </div>  
        </div>

It is interfering with this part right below it.

        <!-- brush colour options -->
        <input type="radio" name="colour" id="red" value="red" />
        <label for="red"><img src="img/red.png" alt="Red"></label>
        <input type="radio" name="colour" id="green" value="#00ff00" />
        <label for="green"><img src="img/green.png" alt="Green" /></label>
        <input type="radio" name="colour" id="blue" value="blue" />
        <label for="blue"><img src="img/blue.png" alt="Blue" /></label>
        <input type="radio" name="colour" id="black" value="black" />
        <label for="black"><img src="img/black.png" alt="Black" /></label>
        <input type="radio" name="colour" id="white" value="white" />
        <label for="white"><img src="img/white.png" alt="White" /></label>
        <input type="radio" name="colour" id="random" value="random" />
        <label for="random"><img src="img/random.png" alt="Random" /></label>

        <img src="img/spacer.png" width="32" height="32">

        <!-- brush size options -->
        <input type="radio" name="size" id="1" value="1" />
        <label for="1"><img src="img/1p.png" alt="1 Point"></label>
        <input type="radio" name="size" id="2" value="2" />
        <label for="2"><img src="img/2p.png" alt="2 Point" /></label>
        <input type="radio" name="size" id="3" value="3" />
        <label for="3"><img src="img/3p.png" alt="3 Point" /></label>
        <input type="radio" name="size" id="4" value="4" />
        <label for="4"><img src="img/4p.png" alt="4 Point" /></label>
        <input type="radio" name="size" id="10" value="10" />
        <label for="10"><img src="img/10p.png" alt="10 Point" /></label>

        <img src="img/spacer.png" width="32" height="32">

        <!-- clear canvas -->
        <input type="image" id="clear" value="Clear" src="img/clear.png">
        </div>

The problem is that the radio buttons above are not clickable or selectable and i cant figure out why.

Here is the accompanying css for the two items:

/* Styling for radio buttons */
.input_hidden {
position: absolute;
left: -9999px;
}

.selected {
background-color: #ccc;
}

#colour label {
display: inline-block;
cursor: pointer;
}

#colour label:hover {
background-color: #efefef;
}

#colour label img {
padding: 3px;

}

/* Footer styling */
footer{
background-color: #323232;
bottom: 0;
box-shadow: 0 -1px 20px rgba(0,0,0,0.4);
height: 42px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000;
}

#saveWrapper { 
position: absolute;
 }  

#saveButton {  
float: right;  
margin-left: 590px;
margin-top: 5px;  
position: relative;  
z-index: 9999;  
cursor: pointer;  
overflow: hidden;  
}  

#textdownload {  
display: none;  
position: absolute;  
font-family: Verdana, Geneva, sans-serif;  
color: #FFFFFF;  
font-size: 12px;  
float: right;  
margin-top: 5px;  
margin-left: 630px;  
width: 300px;  
overflow: hidden;  
}

If i remove the fist code snippet outside the footer the radio buttons work fine?

Any help appreciated!

Answer 1

Try This Add z-index:-1;

#saveWrapper { 
  z-index:-1;
 } 

Live demo

———–

Or
Second Option is

Add one div in your button

and define z-index as like this

Css

#saveWrapper { 
      z-index:1;
     }
    .form_bt{
    position:relative;
      z-index:2;
    }

HTML

<!-- save -->
        <div id="saveWrapper">  
            <div id="save">  
                <img src="img/save.png" alt="Save Image" width="32" height="32" id="saveButton" title="Save Image" />  
            </div>  
            <div id="textdownload">   
                <img src="img/cancel.png" alt="Cancel" width="32" height="32" id="resetButton" title="Continue Drawing" /> 
                Right click the image to download.  
            </div>  
        </div>


<div class="form_bt"> <!-- brush colour options -->
        <input type="radio" name="colour" id="red" value="red" />
        <label for="red"><img src="img/red.png" alt="Red"></label>
        <input type="radio" name="colour" id="green" value="#00ff00" />
        <label for="green"><img src="img/green.png" alt="Green" /></label>
        <input type="radio" name="colour" id="blue" value="blue" />
        <label for="blue"><img src="img/blue.png" alt="Blue" /></label>
        <input type="radio" name="colour" id="black" value="black" />
        <label for="black"><img src="img/black.png" alt="Black" /></label>
        <input type="radio" name="colour" id="white" value="white" />
        <label for="white"><img src="img/white.png" alt="White" /></label>
        <input type="radio" name="colour" id="random" value="random" />
        <label for="random"><img src="img/random.png" alt="Random" /></label>

        <img src="img/spacer.png" width="32" height="32">

        <!-- brush size options -->
        <input type="radio" name="size" id="1" value="1" />
        <label for="1"><img src="img/1p.png" alt="1 Point"></label>
        <input type="radio" name="size" id="2" value="2" />
        <label for="2"><img src="img/2p.png" alt="2 Point" /></label>
        <input type="radio" name="size" id="3" value="3" />
        <label for="3"><img src="img/3p.png" alt="3 Point" /></label>
        <input type="radio" name="size" id="4" value="4" />
        <label for="4"><img src="img/4p.png" alt="4 Point" /></label>
        <input type="radio" name="size" id="10" value="10" />
        <label for="10"><img src="img/10p.png" alt="10 Point" /></label>

        <img src="img/spacer.png" width="32" height="32">

        <!-- clear canvas -->
        <input type="image" id="clear" value="Clear" src="img/clear.png">

          </div>

Demo for this