Struggling to figure out how to create an unordered list where each li element has its own background image (no text, just image). Having difficulty getting the link to work in Firefox - it works in Safari but not in Firefox. The image changes on hover in Firefox but doesn't allow clicking. What's the solution for making it work in Firefox? Have tried placing the A tag both within and outside the li tag.
Here is the CSS code...
#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 is the HTML code...
<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>