Firefox add's 2px padding in a submit button

Question

Hi I seem to be having some problems with Firefox adding 2 extra pixels of padding in a submit button.I have tested this in chrome and IE9 and both browsers render the code ok,Firefox seems to be adding 2 pixel padding at the bottom to the submit button with the key background on the top-right corner.Here is the website:

www.thanathos.host22.com

This is the code for the site:

 <form method="post" action="index.html">
               <input type="text" value="Username"/>
               <input type="text" value="Password"/>
               <input type="submit" id="submit" value=""/>
               <img src="img/header/key.png" alt="" id="key"/>
      </form>

    header section form input{
        color:#b3aaaa;
        border:1px solid #cccccc;
        float: left;
        padding:5px 8px;
        margin-left: 6px;
    }

How can I correct this?

If there is no solution for this can anyone please provide me a solution in witch the input text is equal with input submit and the input text is center from top-bottom?

EDIT: I have checked this in another computer and it seems that Firefox renders this correctly I have encountered this type of problem before that the same browser version shows a website a bit different on different computers.Last time something similar happened in chrome.I never could solve this problem.

Anyone know why the same browser would render a page differently on different computers with the same screen size and resolution?

Answer 1

I was having a problem like this. I then found this CSS thingy that solved the problem:

input::-moz-focus-inner { border:0; padding:0 }

This solution was given in a comment in this blog post:

Bulletproof CSS input button heights

As the post says: this happens because Firefox (User Agent) own CSS style uses !important and anything one tries to do to override the CSS property won't get applied.

Answer 2

** I leave this here since I think it's useful anywhoo..**

in either case try accessing just the button and play around with the css for it:

input[type="submit"] {
  padding-bottom: 3px;
}

EDIT

Okay so there is a problem with your solution, since you're positioning the image above the button you'll make it harder to actually click the submit-button. If you hover the mouse over the key you'll see that it doesnt change to a pointer = not clickable.

I suggest that you remove the image-tag and instead use it as a background in your submit-button. Something like this:

input[type="submit"] {
  padding-bottom: 3px;
  background: url(path-to-image);
  border: none;
  height: "img-height";
  width: "img-width";
}

If the size of the image is correct, also since you do seem to have some sort of background in the submit button allready. Id go with making an image that is the correct size which contains both the background and the key image (I hope this last sentence makes some sence).

Another possible problem could be that you have no text in your button, however the button should inherit the lineheight/font-size from earlier in the css and thus might expand the submit-button more. Try adding something like font-size: 1px or something.