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:
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?
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?
Have you tried adding an active class to the span as well as the li?
Unfortunately, I can't do anything with the span, because it has it's own background image that changes on :active.
Then I guess you'll have to resort to an .active class and use js to apply it.