CSS Sliding doors trouble

I'm having some minor issues with my CSS Sliding doors on my website. They appear fine on lower reso开发者_如何学编程lutions, but higher resolutions appear to make the button bigger and therefore causing the buttons :hover state to not work as it should.

You can see the problem in the right hand side of the header bar here (Login/Register Buttons): http://www.bituser.com/forum/home.php

I have tried multiple solutions such as using different sizes for fonts and changing how the fonts are measured, but I get the feeling I am going about it the wrong way.

Here is a JSfiddle: http://jsfiddle.net/bituser/vkMEg/1/ (It doesn't quite appear right on there, but you should see majority of the code used on the site).

You just didn't load one of the images.

You have:

#user_buttons_right_header span {
    background: url("./styles/prosilver/theme/images/button_left.png") no-repeat scroll left top transparent;
    padding: 1px 10px 4px;
}

You should have

#user_buttons_right_header span {
    background: url("http://www.bituser.com/forum/styles/prosilver/theme/images/button_left.png") no-repeat scroll left top transparent;
    padding: 1px 10px 4px;
}

You forgot to make all of the background images have absolute path.

Except a font everything seems to be okay.

EDIT:

IMHO the problem may lie in line-height that should be set in pixels.