:hover , :active not working firefox

I am sure there is an answer to this on this site somewhere or google…but everything ive seen ive tried and it doesnt work

this page has a scrollbar with :hover and :active properties which work fine in safari but not in firefox.

http://www.philipdusel.com/work.html

CSS BELOW

.scrollgeneric {line-height: 1px;font-size: 1px;position: absolute;top: 0; left: 0;}
.vscrollerbase {width: 15px; background: url(‘http://sandbox.scriptiny.com/scroller/images/scroll-bg.gif’);border-left: 1px solid #6E6E6E; border-right: 1px solid #BDBDBD;}

.hscrollerbase {height: 15px;background-color: white;}
.hscrollerbar {height: 15px;background-color: black;}
.hscrollerbar {background: #99CBCB url(horizontalbarbody_cornerjog.png) 0px -30px repeat-x;}
[COLOR=“#000080”].vscrollerbar {background: #D4D4D4 -15px 0px repeat-y; width: 15px; }

.vscrollerbar:hover { background-color: #B5B5B5; }
.vscrollerbar:active { background-color: #9E9E9E; }[/COLOR]

.vscrollerbar, .hscrollerbar {padding: 10px;z-index: 2;}
.vscrollerbarbeg {background: url(basebarcaps_verticalbarbody.png) -45px -30px no-repeat;width: 15px;height: 15px !important;}
.vscrollerbarend {background: url(basebarcaps_verticalbarbody.png) -45px 0px no-repeat;width: 15px;height: 15px;}
.hscrollerbarbeg {background: url(basebarcaps_verticalbarbody.png) -60px -15px no-repeat;height: 15px;width: 15px !important;}
.hscrollerbarend {background: url(basebarcaps_verticalbarbody.png) -30px -15px no-repeat;height: 15px;width: 15px;}
.scrollerjogbox {width: 15px;height: 15px;top: auto; left: auto;bottom: 0px; right: 0px;background: #4E727C url(horizontalbarbody_cornerjog.png) 0px 0px;}

.vscrollerbasebeg {background: black url(basebarcaps_verticalbarbody.png) -30px -30px no-repeat;width: 15px;height: 9px !important; border-right: 1px #BDBDBD; }
.vscrollerbaseend {background: black url(basebarcaps_verticalbarbody.png) -60px -30px no-repeat;height: 9px;width: 15px; border-right: 1px #BDBDBD;}
.hscrollerbase {background: #D7EBDF url(horizontalbarbody_cornerjog.png) 0px -15px repeat-x;}
.hscrollerbasebeg {background: url(basebarcaps_verticalbarbody.png) -60px 0px no-repeat;height: 15px;width: 15px !important;}
.hscrollerbaseend {height: 15px;width: 15px;background: url(basebarcaps_verticalbarbody.png) -30px 0px no-repeat;}
.scrollerjogbox:hover {background: green url(basebarcaps_verticalbarbody.png) -45px -15px;}

any suggestions would be very much appreciated…

thank you(:

the css is /css/flexcrollstyles.css linked to in header of work.html

The :active pseudo selector can only be used on anchor elements, you would need to use JavaScript to emulate this effect as currently CSS cannot do this alone. Also i highly recommend you use a valid !DOCTYPE for your website as currently it’s running in quirks mode which is going to cause you a massive headache down the road.