CSS Sprites not working for navigation - html

Question

Basically, I am new to using CSS Sprites and wish to do so for icon navigations. Basically, at the moment i have created a sprite which consists of two icons, 21px x 21px and the document size is 21px x 43px.
.nav-main {
position:relative;
top: 19.5px;
}
.nav-main li a {
background-image:url(../images/nav_sprite.png);
background-repeat: no-repeat;
height: 21px;
width: 21px;
display: block;
}
.nav-main li a.1 {
background-position:0px 0px;
}
.nav-main li a:hover.1 {
background-position:0px -23px;
}
That's my attempt, i tried another way where i removed the height and width of the nav-main li a however when i did this i was left with no image. Then i had to do it so that i had a text-indent to remove the text and still display the image but it didn't display the whole image.
The image is the navigation one that looks like this
I would use a screenshot but i am not able to include an image yet :) But yeah i want this to work but it's being an absolute pain.
Any ideas?

Answer 1

You can't use "numbers" as class name. Change to:
.nav-main li a.one {
background-position:0px 0px;
}
.nav-main li a:hover.one {
background-position:0px -23px;
}
I also cleaned up this block of CSS too.
.nav-main li a {
background-image:url(../images/nav_sprite.png) no-repeat; // put no repeat on the same line
height: 21px;
width: 21px;
display: block;
background-position:0px 0px; // you can put this here as your base...the a.one is not needed. If you go this route, just remove ".nav-main li a.one" css function, but keep the "a:hover"
}

Answer 2

You can't use numbers for class names, so
.nav-main li a.1 { /*wrong*/
.nav-main li a.link1 { /*good*/

Answer 3

When using background images for sprites, you are making your site inaccessible. Background images are not visible to low vision users that are using high-contrast mode. The Following is from Yahoo's Accessibility Blog, and is a good example of accessible sprites.
The HTML:
<div role="toolbar" class="toolbar">
<button type="button" class="prnt">Print</button>
<button type="button" class="find">Find</button>
<button type="button" class="save">Save</button>
<button type="button" class="sets">Settings</button>
<button type="button" class="info">Info</button>
</div>
The CSS:
.toolbar {
border: 1px solid #666;
background: #ddd;
padding: 3px;
font-size: 0;
/* Eliminates white space below and between buttons */
}
.toolbar button {
border: 1px solid #333;
background: #bbb;
padding: 0;
margin: 0 3px 0 0;
width: 36px;
height: 36px;
overflow: hidden;
vertical-align: top; /* Needed for Firefox to ensure buttons are properly aligned inside the toolbar. */
}
/* Remove the extra padding and border given to buttons by
default in Firefox to ensure correct alignment of the img. */
.toolbar button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* The above rule removes the focus outline in Firefox. This rule restores it. */
.toolbar button:focus {
outline: dotted 1px #000;
}
/* Hide the text label by inserting an image before it. */
.toolbar button:before {
display: inline-block;
content: url('http://findicons.com/files/icons/2340/preview/toolbar_icon_set_full.png');
}
.toolbar button {
*background: url('http://findicons.com/files/icons/2340/preview/toolbar_icon_set_full.png') no-repeat;
*text-indent: 36px;
}
.toolbar .prnt {
*background-position: -38px -74px;
}
.toolbar .prnt:before {
margin: -73px 0 0 -37px;
}
.toolbar .find {
*background-position: -182px -146px;
}
.toolbar .find:before {
margin: -145px 0 0 -181px;
}
.toolbar .save {
*background-position: -146px -74px;
}
.toolbar .save:before {
margin: -73px 0 0 -145px;
}
.toolbar .sets {
*background-position: -74px -110px;
}
.toolbar .sets:before {
margin: -109px 0 0 -73px;
}
.toolbar .info {
*background-position: -146px -146px;
}
.toolbar .info:before {
margin: -145px 0 0 -145px;
}
For the hover effect, you can use the class and the psuedo selector :hover to adjust the margins to the appropriate values.