:active issue with IE

[Steven_Domanico]

Hello!
There is a situation when I have a list of buttons with a background image. The problem is that :active doesn’t work in IE. Please see a simple example below:

<ul>

<li><span>1</span></li>

<li><span>2</span></li>

</ul>

li { background: blue; }

li:hover {background: red; }

li:active {background: orange; }

span { background: url(../../img/tb_delete.png); display: block; }

As you notice, span has a background image and li has a background color that supposed to change on hover and active. Everything works fine in FF, Chrome and Safari, except IE. The problem, as far as I understand, is the span tag. IE doesn’t do :active on element that has another element on top (inside) of it. Is there something I can do to go around this?

[Paulie_D]

Have you tried adding an active class to the span as well as the li?

span:active {
background: orange;
}

[Steven_Domanico]

Unfortunately, I can’t do anything with the span, because it has it’s own background image that changes on :active.

[Paulie_D]

Then I guess you’ll have to resort to an .active class and use js to apply it.

[Author]

Posts