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:

http://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.