Question

I m trying to create a unordered list, with each li element having it s own background image (no text, just image), but I m having trouble (in Firefox at least, it works in Safari) getting the link to work. In Firefox, the image changes on hover, but doesn t let you click. How do I get it to work in Firefox? I ve tried the A tag within and outside the li tag.

Here s the CSS...

#menu   {
   width:107px;
   height:200px;
}

#menu-1, #menu-1-active, #menu-2, #menu-2-active, #menu-3, #menu-3-active, #menu-4, #menu-4-active, #menu-5, #menu-5-active, #menu-6, #menu-6-active    {
   width:107px;
   height:29px;
   padding-bottom:5px;
   background-repeat: no-repeat;
   display:block;
   text-indent: -999px;

}

#menu-1   {
   background-image: url(menu1.png);
}
#menu-1:hover   {
   background-image: url(menu1on.png);
}
#menu-1-active   {
   background-image: url(menu1on.png);
}


#menu-2   {
   background-image: url(menu2.png);
}
#menu-2:hover   {
   background-image: url(menu2on.png);
}
#menu-2-active   {
   background-image: url(menu2on.png);
}

etc

And here s the HTML...

<div id="menu">
<ul>

<a href="1"><li id="menu-1-active">
One
</li></a>
<a href="2"><li id="menu-2">
Two
</li></a>
<a href="3"><li id="menu-3">
Three
</li></a>
<a href="4"><li id="menu-4">
Four
</li></a>
<a href="5"><li id="menu-5">
Five
</li></a>
<a href="6"><li id="menu-6">
Six
</li></a>

</ul>
</div>

Answer 1

The link needs to be inside the <li>, for a start, as a <li> is a block-level element whereas an <a> is inline.

Also, setting :hover on elements other than <a> - while supported in the likes of FF, etc - is in my experience a bit spotty at working right and doesn t work at all in older IEs.

Personally, if it were me writing the HTML, it would look something like this:

<ul id="menu">
    <li id="menu-1-active"><a href="1">One</a></li>
    <li id="menu-2"><a href="2">Two</a></li>
    <li id="menu-3"><a href="3">Three</a></li>
    <li id="menu-4"><a href="4">Four</a></li>
    <li id="menu-5"><a href="5">Five</a></li>
    <li id="menu-6"><a href="6">Six</a></li>
</ul>

And the CSS would be something like the following:

#menu{
    width:107px;
 height:200px;
}
#menu li{
    padding: 0, 0, 5px;
}
#menu li a{
    display: block;
    text-indent: -999px;
    height: 29px;
    background: transparent, none, center, center, no-repeat;
}

#menu-1 a:link, #menu-1 a:visited { background-image: url(menu1.png); }
#menu-1 a:hover, #menu-1 a:active, #menu-1-active { background-image: url(menu1on.png); }

/** Continue on with your other links here... **/

Answer 2

You need to put the a tag inside the li tag. And then set the a tag to display: block; This will cause the a tag to fill up all the space inside the li tag and make the whole area clickable.

For example:

<style type="text/css" media="screen">
    a {
        display: block;
    }
</style>

<ul>
    <li id="menu-1-active"><a href="1">One</a></li>
    <li id="menu-2-active"><a href="3">One</a></li>
</ul>

友情链接