<img> and <span> inside <a>, and only the span works as a link

Question

I have a menu, with icons (img) and text underneath (span). I want both of them to be clickable as a link. I have this html for each item of the menu:

<div class="menu_item">
    <a href="menu/viewTemplates.html">
        <img class="menu_icon" src="images/icons/template.png" alt="Templates"/>
        <span>Templates</span>
    </a>
</div>

When I click on the img, nothing happens, but when I click on the span, the link works fine. This happens in both Chrome and Firefox. Everywhere I've read, people seem to have no problem doing this, except for IE, but this is not my case. Please, any ideas as to what could be making this not work?.

I tried it like this, and it works:

<div class="menu_item">
    <a href="menu/downloadTemplates.html">
        <div class="menu_icon" id="lnkDownloadTemplates"></div>
        <span>Download</span>
    </a>
</div>

But I still want to know why the other way, that is supposed to be the correct, Is not working for me.

CSS:

.menu_item{
    height: 15%;
    width: 45%;
    text-align: center;
}
.menu_icon{
    width:auto;
    height:100%;
}

Answer 1

.menu_item {
  height: 15%;
  width: 45%;
  text-align: center;
}
.menu_item a {
  text-decoration: none;
}
.menu_item a .menu_icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

<div class="menu_item">
    <a href="menu/viewTemplates.html">
        <img class="menu_icon" src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="Templates"/>
        <span>Templates</span>
    </a>
</div>

Is this the same that you are looking for?

Hope this helps.