CRISHK Corporation CRISHK Corporation - 6 months ago 15
CSS Question

When click on tools div button (:active) works fine in Firefox but not in IE

This code works fine in Firefox but not in IE, please give a solution only using CSS (No jquery or javascript), the problem begins when you click on the span inside the DIV!

<style type="text/css">

.tools {
cursor:pointer;
}

.tools {
background-color:#aaa;
padding:5px;
}

.tools span {
background-color:green;
color:white;
}

.tools:hover {
background-color:#ccc;
}

.tools:hover span {
background-color:red;

}

.tools:active {
background-color:#333;
color:#fff;
}

.tools:active span {
background-color:blue;
}


</style>

</head>

<body onselectstart="return false;" >
<div class="tools" style="width:100px; height:20px;">
<span>
Hello world...
</span>
</div>
</body>

Answer

You shouldn't make div or any other html element to behave as another element. There is no reason why you shouldn'y use the "a" element instead. You just need to specify (in css) "display:block" in order for you to design it as you would with a div.

<style type="text/css">

.tools {
    background-color:#aaa;
    padding:5px;
    display:block;
}

.tools span {
    background-color:green;
    color:white;
}

.tools:hover {
    background-color:#ccc;
}

.tools:hover span {
    background-color:red;

}

.tools:active {
    background-color:#333;
    color:#fff;
}

.tools:active span {
    background-color:blue;
}


</style>

</head>

<body  onselectstart="return false;" >
<a class="tools" style="width:100px; height:20px;">
<span>
Hello world...
</span>
</a>
</body>