CSS selector :active not working on child element click in IE8

Question

I have the following HTML structure:

<div id="ctr__Wrapper" class="wrapper">
    <div id="ctr" class="control clickable">
        <img src="logo.png">
    </div>
</div>

And the following CSS for this:

.control
{
    border: 1px solid #000;
    background-color: #666;
    padding: 20px;
}

.control:active
{
    background-color: #bbb;
}

When I click on the element "ctr", I see the background color changing, but when I click on the image itself, it doesn't. This works fine in Firefox, but not in IE8. Is there something I can do to solve this in CSS.

The working example can be seen here: http://jsfiddle.net/miljenko/DNMPd/

score 2 · Accepted Answer · answered Oct 19 '11 at 13:15

2

You could use a background image instead of a real image.

html:

<div id="ctr__Wrapper" class="wrapper">
    <div id="ctr" class="control clickable">
    </div>
</div>

css:

.control
{
    border: 1px solid #000;
    background-color: #666;
    height: 40+height-of-logopx;
    background-image:url(logo.png); background-repeat:no-repeat;
    background-position:20px 20px;
}

.control:active
{
    background-color: #bbb;
}

answered Oct 19 '11 at 13:15

nullmark

86
2

I'm aware of this, but the specific nature of the project requires this structure. +1 anyway, this would solve the problem if I could apply it... – Miljenko Barbir Oct 19 '11 at 13:51
In lack of a better answer, I'll accept this. I guess there isn't a way to do this in CSS while keeping the structure. – Miljenko Barbir Oct 20 '11 at 18:59
I guess (but i have no time to test it now), you could use the old structure when using a invisible (transparent) Image, with z-index:0 and z-index:veryhigh for the div around it. Also you could use a 1x1 Pixel sized invisible image. – nullmark Oct 24 '11 at 09:23

score 0 · Answer 2 · answered Oct 19 '11 at 15:03

0

because < ie9 don't support :active on anything other than anchor elements. here's your fiddle, that should work in ie8 http://jsfiddle.net/jalbertbowdenii/DNMPd/12/

answered Oct 19 '11 at 15:03

albert

8,112
3
47
63

It doesn't work in IE8, it has the same behavior as the original one. Background changes on div-click, but not on img-click. – Miljenko Barbir Oct 20 '11 at 05:11
my bad man, didn't add href attribute. i updated it here: http://jsfiddle.net/jalbertbowdenii/DNMPd/13/ – albert Oct 20 '11 at 06:11
Did you try clicking on the image, and not the background div/a? – Miljenko Barbir Oct 20 '11 at 06:20
1

The first statement is patently wrong, `:active` started working on non-anchor elements in IE8. The bug here is something entirely different... – BoltClock May 25 '12 at 11:44
we're both wrong; ie8 has a bug with negative z-indexed elements when used in conjunction with :active – albert May 25 '12 at 20:11
@albert, do you mind expanding on your comment? I'm not sure how `z-index` is related here. – Dan Cecile Aug 10 '12 at 14:22
"In Internet Explorer version 8 the manipulation of elements with negative z-index is buggy when used in conjunction with :hover or :active rule" src: http://reference.sitepoint.com/css/pseudoclass-active also related: http://jhop.me/ie8-bugs – albert Aug 10 '12 at 19:50
OK, thanks for the link. James Hopkins' bug list doesn't mention this bug (not even in the Wayback Machine), and anyways I don't see z-index in an examples here. There's [another question](http://stackoverflow.com/questions/10753215/clicking-a-child-doesnt-trigger-the-parents-active-state-in-ie) still open; I'm watching to see if other answers show up. – Dan Cecile Aug 13 '12 at 13:50

CSS selector :active not working on child element click in IE8

2 Answers2

Linked