Navbar Image

I've been working on a new look for my forum, and am down to an extra navbar option that I've added a while ago now.

I've figured out how to have all the 'regular' buttons change looks when you hover over them, but I don't know how to do this with the extra one I added.

If anyone wants to see what I mean: Link to my forum
Hover over the buttons in the navbar, you'll see that they all change slightly when moused over, except for the Runehead one. Could anyone tell me how to make this one do thesame thing? I've got the image ready for it and all, just can't get it to work..

Any help would be greatly appreciated

Being a CSS beginner, I figured I'd try copying a bit of code in the stylesheet that produced the buttons I want nicely earlier on...

Example:
#i_icon_mini_login{width:80px; height:22px; background:url(https://i.servimg.com/u/f68/15/28/06/55/hover_23.png) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(https://i.servimg.com/u/f68/15/28/06/55/hover_23.png) no-repeat 0 -22px;}
That bit gives the button that looks like the top part of this image: and changes to the bottom part when moused over.
So I tried adding this to the CSS right underneath the last one, since the button I made for this is thesame size etc, and I had the image uploaded like all the others:

#i_icon_mini_runehead{width:80px; height:22px; background:url(https://i.servimg.com/u/f68/15/28/06/55/hover_14.png) no-repeat 0 0;}
#i_icon_mini_runehead:hover{background:url(https://i.servimg.com/u/f68/15/28/06/55/hover_14.png) no-repeat 0 -22px;}

But helas, that didn't work, so I'm probably doing something terribly wrong here...

Could anyone enlighten me please?

Don't know about the way your trying to do it you may want to try using this mouse over image script generator just for that 1 nav. button if all else fails.
It's fairly easy to use.
mouse over images