css3 transitions not working in firefox - firefox

Question

I am trying to get a transition working on some bullets in firefox, but I am having no luck. It works on chrome, safari, opera and ie. Here is my css. I just want the background-image adjusted to my y positioning.
#slideshow-nav a {
display: block;
width: 10px;
height: 10px;
padding: 3px;
background: url('images/bullets.png');
background-position-y: 17px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#slideshow-nav a:hover {
display: block;
width: 10px;
height: 10px;
padding: 3px;
background: url('images/bullets.png');
background-position-y: 0px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#slideshow-nav li.activeSlide a {
display: block;
background: url('images/bullets.png');
background-position-y: 0px;
width: 10px;
height: 10px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}

Answer 1

To my knowledge (which most certainly is incomplete) background-position-y is not a valid property. My guess is Firefox is not recognizing it. Try:
background-position: 0 17px;
going to
background-position: 0 0;

Answer 2

a.menuhvr { background-image:url('images/bullets.png'); background-repeat:no-repeat; background-position:left; padding-right: 0px; padding-left: 20px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; text-transform: none; border: 0px; display: block; -webkit-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; height: 25px; line-height: 25px; }
a.menuhvr:hover { background-image: url(images/bullet1.png); background-repeat:no-repeat; background-color: #104595; background-position: right; margin: 0px; padding-right: 0px; padding-left: 25px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; background-color: #104595; border: 0px; display: block; height: 25px; line-height: 25px; }
If you wish you can change both different bullet images or can use single