Chris Sobolewski 15

I have the following markup:

<a class="navlink" href="index.html">
    <li id='home'>
        <img src="images/home.png" alt="home icon"> 
       Home
    </li>
</a>

In all browsers except firefox, the entire LI is clickable. In firefox I must click on either the image or the text in order to use the link.

Does anyone know of a fix for this?

1 answer

Abinadi Ayerdis 709
2
points
This was chosen as the best answer

I don't think this is valid mark-up. I suggest doing it this way:

<li id='home'>
<a class="navlink" href="index.html">
   <img src="images/home.png" alt="home icon"> 
   Home
</a>
</li>

Then use CSS to make the <a> tag a block-level element. That way it will be the same dimensions of the parent element.

a.navlink {
display: block;
height: auto;
width: 100%;
}
Answered about 3 years ago by Abinadi Ayerdis
  • Yeah, I knew the markup wasn't valid. That was just my last ditch effort to get the anchor to wrap around the li. I don't know why I didn't think to just make the anchor a block display. Thanks very much. — Chris Sobolewski about 3 years ago