I am having trouble figuring out what I am doing wrong in my code. What I am wanting to do is call up one of three images, depending on whether the specified page is active or inactive, or the link is being hovered over. I am only getting the anchor image next to my text, instead of the images that I have linked in. Below is a copy of the code for both the html and css. Attached are examples of the images I am trying to link to the navigation tabs.
CSS:
#mainnav {
height: 80px;
width: 80%;
margin: auto;
background: #FFFFFF;
}
#mainnav h1 {
font-family: Britannic Bold;
font-size: 20px;
}
a#nav_league {
background-image:url(images/league.gif) no-repeat top right;
margin: 0px;
display: block;
width: 80px;
height: 0px !important;
height /**/:33px;
overflow: visible;
}
a#nav_league:hover {
background-position: 0 -36px;
text-decoration: none;
margin: 0px;
display: block;
width: 80px;
height: 0px !important;
height /**/:33px;
overflow: hidden;
}
a#nav_league.current {
background-position: 0 -72px;
margin: 0px;
display: block;
width: 80px;
height: 0px !important;
height /**/:33px;
overflow: hidden;
}
HTML
<div id="mainnav">
<h1><a id="mainlogo" href="/">The Urban League</a></h1>
<a id="nav_league" href="/page/" class="current">The League</a>
<a id="nav_programs" href="/page/">Programs</a>
<a id="nav_events" href="/page/">Events</a>
<a id="nav_jobs" href="/page/">Jobs</a>
<a id="nav_resources" href="/page/">Resources</a>
</div>
