CODEWITHSUNDEEP
formsfirefoxcss
Erik
Erik

Reputation: 5791

Firefox bug with INPUT line-height? Any work around?

I noticed my input button does not look correct in Firefox and I can't figure out how to make the value (text) appear in the proper location.

.rb {
    width: 142px;
    height:142px;
    float:left;
    background:#2F2F2F;
    color:#FFF;
    font-size:95%;
    line-height:210px;
    margin-top:15px;
    border:0;
    outline:none;
    padding:0;
    text-align:center
}

.rbSubmit {
    background: url('http://www.41q.org/admin/img/sprite_icon.png') -568px -200px no-repeat;
    color:#808080
}

<input id="rbSubmit" class="rb rbSubmit" type="submit" value="submit">

Upvotes: 0

Views: 6238

Answers (5)

Luis Martins
Luis Martins

Reputation: 1481

The min-height property also works, which might be useful if you are using inputs inside flexbox elements, where to be able to stretch you can't have a declared height.

Upvotes: 0

TLindig
TLindig

Reputation: 50090

I had problems with the bug of FireFox too. It ignores line-height settings on input type "submit", "reset" and "button".

The workaround with padding did not work for me, because I need it for twitter bootstrap. Twitter bootstrap use padding for sizing buttons.

So I found this workaround:

//FireFox workaround, FF ignores line-height for input elements.
input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    line-height: 19px;
    height: 19px;
}

Upvotes: 3

Olga
Olga

Reputation: 1690

I encountered very same issue lately, found a very good explanation on the web concerning exactly line-height (and not only in Firefox, also in Opera browser)

http://www.cssnewbie.com/input-button-line-height-bug/

I recently ran into a bug in Firefox and Opera when I tried to set the line height of text inside a button (which affects input “submit” buttons as well as the HTML button tag). The bug? The line height can’t be changed!

Bottom line advice is to use padding instead.

Also I found minitech's anwser very helpfull, so I guess there are two issues in your question

Upvotes: 1

Tim M.
Tim M.

Reputation: 54359

http://jsfiddle.net/qzYVP/1/

This relies on explicit sizing using height + padding + line-height equal to font-size. Works in IE8/9, FF, Chrome.

.rb {
    width: 142px;

    /* tweak these to get the exact font size/position desired */
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    padding: 90px 0 38px 0;

    float:left;
    background:#2F2F2F;
    color:#FFF;
    margin-top:15px;
    border:0;
    outline:none;
}

Example with relative font size: http://jsfiddle.net/qzYVP/2/

Upvotes: 0

Ry-
Ry-

Reputation: 224867

Firefox adds some extra padding. You can fix it like this:

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

Upvotes: 5

Related Questions