I am dealing with the following HTML structure:
<div id="ctr__Wrapper" class="wrapper">
<div id="ctr" class="control clickable">
<img src="logo.png">
</div>
</div>
Here is the CSS code for this setup:
.control
{
border: 1px solid #000;
background-color: #666;
padding: 20px;
}
.control:active
{
background-color: #bbb;
}
Upon clicking on the "ctr" element, I observe a change in background color. However, when I click on the image itself, no effect is seen. This behavior is consistent in Firefox but not in IE8. Are there any CSS solutions for this issue?
To see a working example, please visit: http://jsfiddle.net/miljenko/DNMPd/