Geek Answers Handbook

<img> and <span> inside <a> and only the range works like a link

I have a menu with icons ( img) and text below ( span). I want both to be viewable as a link. I have this html for each menu item:

<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 img, nothing happens, but when I click on span, the link works fine. This happens in both Chrome and Firefox. Wherever I read, people seem to have nothing to do but IE, but that's none of my business. Please any ideas as to what might make 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, which should be right, does not work for me.

CSS

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

display: block; . HTML: -

 <div class="menu_item">
        <a href="https://www.google.com">
            <img class="menu_icon" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png" alt="Templates"/>
            <span>Templates</span>
        </a>
    </div>

CSS -

 .menu_item a {
   display:block;
 }
 .menu_item{
    height: 15%;
    width: 45%;
    text-align: center;
   }
 .menu_icon{
    width:auto;
    height:100%;
  }
+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>

, ?

, .

+1

It turned out that the problem was in the JS code, which accepted the ID of my elements (I did not include the identifier when I posted my question) and redefined the link.

0
source

More articles:


All Articles