CSS Rollover Issue

programming web dev
1

Can’t get my images to rollover, not sure what’s going on. I’ve done the tutorial on this site and nothing. Done some other tut’s on the net and still having the same issue. I’m trying to get the home image to move position on rollover correctly.

Link (firefox only) http://designsbyrema.com/Caren L/schedule.html

<div class="home"><a href="#">&nbsp;</a></div>

.home {
    position: absolute;
    height: 30px;
    width: 57px;
    text-indent: 0px;
    overflow: hidden;
    background: url(images/links/home.jpg) 0 0 no-repeat;
    display: block;
    float:left;
    z-index:1;
}
.home a:hover {
    background-position: -30 0 no-repeat;
    z-index:1;
}