Tutorial :Firefox not rendering list item as a link



Question:

I've never come across this problem before and its quite annoying me. I have a list which when hovered over, a box appears around it. I have a list set out like the following

<div id="sidebar">      <h2>Our Services</h2>        <ul>          <a href="furniture.php"><li>Furniture</li></a>          <a href="kitchens.php"><li>Kitchens</li></a>          <a href="bedrooms.php"><li>Bedrooms</li></a>          <a href="flooring.php"><li>Flooring</li></a>          <a href="externaljoinery.php"><li>External Joinery</li></a>          <a href="commercialwork.php"><li>Commercial Work</li></a>          <a href="staircases.php"><li>Staircases</li></a>          <a href="tiling.php"><li>Tiling</li></a>      </ul>  </div>  

But for some reason firefox doesnt render the whole list item as a link, only the text. It works across other browsers (even IE) but not firefox.


Solution:1

Change

<a href="furniture.php"><li>Furniture</li></a>  

To

<li><a href="furniture.php">Furniture</a></li>  

Inside a UL you are supposed to have LI elements, not anything else. However, inside the LI you can have other tags such as A

Update

You can set the style of A to display:block as mwgriffith suggested on comments.

or to make the whole line a link you can also assign a click event on the LI, here is an example using jQuery


Solution:2

I figured it out, instead of having the <li> display the background I used display:block on the <a> tags and uses the a:hover to create the background.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »