image (img) within anchor (a) not rendering correctly

Question

I am trying to understand what I'm doing wrong, I have two elements, image withing anchor with no style. some how the anchor dose not cover the image area.

example: http://jsfiddle.net/L4ShV/1/

  <a href="javascript:void(0)" id="downloadLink" >
    <img src="http://toonimo.com/testing/clients_tests/somoto/flv_player/images/nlp/free_download_btn.jpg" border="0" style="width: 373px;height: 120px;" />
</a>
<div>
    <h1>a dimantions:</h1>
    width: <span id='width_c'></span><br>
    height: <span id='height_c'></span><br>
    <br>
        when clearly its not possible!
        How can i get the Real height?
</div>

<script>
    var el = document.getElementById('downloadLink');
    document.getElementById('width_c').innerHTML = el.offsetWidth; 
    document.getElementById('height_c').innerHTML = el.offsetHeight;
</script>

any reason or solution for this problem?

Answer 1

That is a normal behaviour of anchor as it expects for block-level elements. You can float a to cover the image.

<a href="javascript:void(0)" id="downloadLink" style="float:left">