CODEWITHSUNDEEP
css
clarkk
clarkk

Reputation: 27689

input behaviour in browsers

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;
}

Upvotes: 0

Views: 176

Answers (2)

Richard M
Richard M

Reputation: 14535

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;
}

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

It's possible that this is due to the varying ways in which form elements are handled by the different browsers. You could try adding:

-moz-box-sizing: content-box; /* or border-box */
-webkit-box-sizing: content-box;
box-sizing: content-box;

to your CSS styles for the buttons, this should force all browsers to use the same box model, after which the padding rules should apply the same cross-browser.

Upvotes: 0

Related Questions