Button text shifts on click

Question

Hi,

I've noticed that on my drupal site when I click a form submit button, the button's text shifts by about 1px to the right in firefox(PC), and 1px to the right and to the bottom in IE and Opera. In Chrome this does not happen at all. This looks sloppy. Anyone know why this is happening and if it's possible to prevent?

I'm using the garland theme and a zen sub-theme and it happens in both.

Thanks

Answer 1

try a CSS reset file; issues like this are inherent of browser rendering differences... a CSS reset does effectively that; it may throw off your design settings, but they will be much easier to fix once you implement this:

Eric Meyer's CSS Reset

Answer 2

I think this is just the way Chrome implements buttons. You could try something like adding 1px padding to the button with jQuery if it's that important to you. Something like this:

$("#submit-button").click(function () {
    $(this).css('padding-left', '1px');
});

I'm not sure if that will work or not.