title: <img> and <span> inside <a>, and only the span works as a link
body: <p>I have a menu, with icons (<code>img</code>) and text underneath (<code>span</code>). I want both of them to be clickable as a link. I have this html for each item of the menu:</p>
  
  <pre><code>&lt;div class="menu_item"&gt;
      &lt;a href="menu/viewTemplates.html"&gt;
          &lt;img class="menu_icon" src="images/icons/template.png" alt="Templates"/&gt;
          &lt;span&gt;Templates&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on the <code>img</code>, nothing happens, but when I click on the <code>span</code>, 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?.</p>
  
  <p>I tried it like this, and it works:</p>
  
  <pre><code>&lt;div class="menu_item"&gt;
      &lt;a href="menu/downloadTemplates.html"&gt;
          &lt;div class="menu_icon" id="lnkDownloadTemplates"&gt;&lt;/div&gt;
          &lt;span&gt;Download&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I still want to know why the other way, that is supposed to be the correct, Is not working for me.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.menu_item{
      height: 15%;
      width: 45%;
      text-align: center;
  }
  .menu_icon{
      width:auto;
      height:100%;
  }
  </code></pre>