Firefox not rendering list item as a link

Question

Hi there, 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.

Answer 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

Answer 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.