css not working in firefox

Dear All
Attached is a JPEG showing the example displayed in IE and FF. See hwo the firefox one does not redraw properly!
Im having trouble with my CSS, working in IE but not in Firefox.
Attached is a JPEG, the top one showing it in firefox and the bootom showing it in IE.
Anyone have any ideas why this is not working in Firefox?? Its sending me mad haha
IN IE the background graphics display ok (fully) but in firefox the background graphics only display partially!! I see the top left of each graphics. When the next number (digit) increases to a three digit number, i do however get to see more of the background graphic.
Why is this happening in FF only?
Heres is the css
css part: .pageprenxt {
background-image: url("/dating/images/Pag_GreenLoz.jpg");
background-repeat: no-repeat;
height: 24px;
width: 47px;
padding: 5px 1px 1px 1px;
font-weight: bolder;
font-size: 70%;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: center;
vertical-align: middle;
}
.pagenormal {
background-image: url("/dating/images/Pag_NumberBackYell.jpg");
background-repeat: no-repeat;
height: 24px;
width: 29px;
padding: 5px 1px 1px 1px;
font-weight: bolder;
font-size: 70%;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
}
.pagemouse {
background-color: #888888;
padding: 0px 0px 0px 0px;
font-weight: bolder;
font-size: 70%;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
.pageout {
background-image: url("/dating/images/Pag_NumberBackGreen.jpg");
background-repeat: no-repeat;
height: 24px;
width: 29px;
padding: 5px 1px 1px 1px;
font-weight: bolder;
font-size: 70%;
color: white;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
}
Best regards
Neil