CSS :active works incorrectly on a <a> element in IE9

Question

I'm making a site using HTML and CSS and I need to have an arrow which will show "animation" when clicked and activate Javascript.

Here's relevant piece of code:

<table>
    <tr>
        <td class="td_bezIvice">
            <a id="slevo" href="javascript:levo()"> <img src="left.png" width="60" alt="стрелица лево"/></a>
        </td>

        <td>
            <table>
                <tr>
                    <td class="gal"><img id="leva" src="blank.jpg" alt="лева слика"></td>   <td class="gal"><img id="srednja" src="blank.jpg" alt="средња слика"></td>  <td class="gal"><img id="desna" src="blank.jpg" alt="десна слика"></td>
                </tr>

            </table>
        </td>
        <td class="td_bezIvice">
            <a id="sdesno" href="javascript:desno()">   <img src="right.png" width="60" alt="стрелица десно"/> </a>
        </td>

    </tr>

</table>

Of interest here are the <a> with id="slevo" and <a> with id="sdesno"

Here's their CSS:

#slevo
{
    display:block;
    height:51px;
    width: 60px;
    border: 10px outset gray;
}

#slevo:active
{
    display:block;
    height:51px;
    width: 60px;
    border: 10px inset gray;
}


#sdesno
{
    display:block;
    height:51px;
    width: 60px;
    border: 10px outset gray;
}

#sdesno:active
{
    display:block;
    height:51px;
    width: 60px;
    border: 10px inset gray;
}

In other browsers when I click the arrow, the border changes from outset to inset and that provides visual feedback. However in IE 9, no change in border style happens. The border style also looks different from the one which Firefox, Opera and Chrome show.

How do I fix that?

UPDATE: I did some experimenting with IE9 compatibility mode and I've noticed that when it's enabled and I click on the arrow, the border does change to inset until I click on some other location when it changes back to outset. On the other hand in compatibility mode JavaScript which inserts images from server into the inner table fails. I'm using a do while loop to add images into array and checking the naturalHeight for zero to see the end and the height is detected to be zero although the array element has higher naturalHeight when I examine it in the F12 mode.

Answer 1

Make sure you've set a doctype so that IE renders the document in standards mode. I'm guessing the discrepancies you're seeing between other browsers and IE9 are the result of IE using quirks mode.