Hi, all.
I have an ordered list for my horizontal navbar, but I'm using sprite images (for a, active & hover) instead of letting any text show. I'm trying to let the image appear on a row using float: left, but it's not happening. I think the next image appears behind the first.
Here's my code: HTML:
<div id="navbar">
<ol id="toc">
<li id="nava"><a href="index.html">Home</a></li>
<li id="navb"><a href="firm.html">The Firm</a></li>
<li id="navc"><a href="legal.html">Legal Services</a></li>
<li id="navd"><a href="partners.html">Partners & Associates</a></li>
<li id="nave"><a href="paralegal.html">Para-legal Services</a></li>
<li id="navf"><a href="clients.html">Clients</a></li>
<li id="navg"><a href="articles.html">Articles</a></li>
<li id="navh"><a href="contact.html">Contact</a></li>
</ol>
</div>
CSS:
#navbar
{
width: 900px;
height: 103px;
/*position: relative;
z-index: 1;*/
padding-top: 151px;
padding-left: 1px;
}
ol#toc {
height: 103px;
list-style: none;
margin: 0 auto;
padding: 0;
text-indent: -9999px;
}
ol#toc li {
margin: auto;
}
li#nava a
{
background: url(../images/GBDLR-nav-text.png);
display: block;
float: left;
height: 103px;
width: 112px;
background-position: 0 0;
}
li#nava a
{
background: url(../images/GBDLR-nav-text.png);
display: block;
float: left;
height: 103px;
width: 112px;
background-position: 0 0;
}
li#nava a:hover
{
background-position: 0 -103px;
}
li#navb a
{
background: url(../images/GBDLR-nav-text.png);
display: block;
float: left;
height: 103px;
background-position: 0 0;
}
li#navb a:hover
{
background-position: -112px -103px;
}
Hope you guys can help.
Thanks so much!! :)