Question

how to make inputs look like the same in every browser?

how can you make buttons or inputs look like the same in every browser? in firefox the padding is behaving different than ie and chrome

input.btn {
    border:1px solid #23458c;
    background:url('gfx/layout.btn_bg.png');
    color:#f0f5fa;
    font-weight:bold;
    margin-right:6px;
    padding:1px 5px 2px 5px;
    [if Gecko] padding:0px 5px 1px 5px;
    cursor:pointer;
}

edit

input.btn {
    border:1px solid #23458c;
    background:url('gfx/layout.btn_bg.png');
    color:#f0f5fa;
    font-weight:bold;
    margin-right:6px;
    padding:1px 6px 2px 6px;
    cursor:pointer;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

Answer 1

Firefox adds some inner padding for it’s dotted focus effect which you may need to remove.

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