Cross browser button padding issues

Question

Really simple but very annoying issue - I have a form text box which has a button sitting along side it horizontally so they should both be aligned heights. I am adding a couple of pixels top and bottom padding but i cant get this to work cross browser - internet explorer in particular seems to double the padding for some reason.

Can some one offer advice on how to get buttons the exact same size in most major browsers.

Here is the css I am using for a button

.button {
color: #44444a;
cursor: pointer;
font-weight: bold;
overflow: visible;
padding: 0.1em 1em;
width: auto;
border: solid 1px #44444a;
}

Answer 1

Best advice I can offer based on the very limited information you have provided is:

1 - Ensure you have declared your doctype.

2 - Perform a CSS reset. Something like:

*{
  margin:0;
  padding:0;
}

Googling "CSS reset" will usually turn up something useful.

3 - Know your box-model!

It would be useful if you could perhaps provide us with a bit more information (HTML & CSS code) or a link to the offending page.