Single Image CSS Rollover???

Ok, so I've been trying my best to correctly code what seemed to be EXTREMELY simple, but I can't get it to work! Below is the code I'm using and a link to a test page I've been trying it with.

CSS Code:

Code:

---

.rollover{
  height:22px;
  width:109px;
  background-image:url('Button.jpg');
  }
  .rollover a:link{
  background-image:url('Button.jpg');
  height:22px;
  width:109px;
  }
  .rollover a:hover{
  background-image:url('Button.jpg');
  height:22px;
  width:109px;
  background-position:-109px 0;
  }
  .rollover a:active{
  background-image:url('Button.jpg');
  height:22px;
  width:109px;
  background-position:-109px 0;
  }
    .rollover a:visited{
  background-image:url('Button.jpg');
  height:22px;
  width:109px;
  background-position:-109px 0;
  }

---

HTML Code:

Code:

---

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

---

http://www.mrsjonesandme.com/Test.html

Code:

---

  a.rollover{
  height:22px;
  width:109px;
  background: url('Button.jpg') no-repeat top left;
  }
 
  a:hover.rollover {
  background:url('Button.jpg') no-repeat top right;
  height:22px;
  width:109px;
  }

---

That's all you need. You have to be mindful of the CSS heirarchy.

The way you have it, it's saying apply those styles to an <a> element within an element with a class or rollover. But really your anchor element has that class, so you want a.rollover and a:hover.rollever

No need for the visited, active, etc...