FireFox element click move bug

by paulwesterberg

HTML

<script type="text/javascript">
    function onClick(el)
    {         
    document.getElementById("console").innerHTML += (new Date()).getTime() + " " + el.id + " clicked<br/>";
    }
</script>

<div id="div1" onclick="onClick(this);">
    <div id="div2">
        <p>
            Content</p>
    </div>
</div>
<p>
    If the cursor is towards the top of "C" then click event is lost. Same thing happens if the area just below the dotted border is clicked.</p>
<div id="console">
</div>

CSS

#div1
{
    padding: 20px;
    border: 1px solid #000;
    width: 200px;
    cursor: default;
}
#div2
{
    padding: 20px;
    border: 1px dotted blue;
    position: relative;
}
#div1:active #div2, #div2:active
{
    top: 5px;
    left: 5px;
}