Box Sizing on Inputs in Firefox Hides Text

Box sizing on inputs in firefox hides text

You should set the height to 100%. I tried the following CSS for your input fields, and it helped:

input[type="text"] {
    -moz-box-sizing: border-box;
    font-size: 16px;
    height: 100%;
    padding: 20px;
    width: 100%;
}

==> The reason is, that your padding of 20px is too much. Try first removing the padding. You will see that the input field's text gets visible suddenly ;-). After I saw this, I set the height to 100%. Now you can decrease the padding to e.g. 10px and everything looks fine.

box-sizing: border-box sizing issue in Firefox

This appears to be a bug, but it's not calculating the width as if no padding is applied. It's calculating the width as if the content (the <img> tag) has the width it would have were there no padding applied. It's then adding padding on top of this incorrectly calculated content width.

i.e. With no padding, the <img> element has a width of 167px. If you then add padding it should shrink (because of the height constraint) and .wrapper's width should now be the width of the shrunken <img> width plus the padding. Instead, (in FF at least) .wrapper's width is the width of the unshrunken <img> width plus the padding (167 + 16).

At least, that's what I'm seeing.

Also, it looks like you can see the same in Chrome (35.0.1916.114) if you toggle the padding rule on/off in dev tools. Initially Chrome gets it right, but then you see the same erroneous behaviour after toggling padding.

Input has different Widths in FireFox and Chrome

The size attribute of inputs specifies the width in (number of) characters. The font is bigger in firefox.

Give your inputs a width using css.

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

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/

Border box sizing in firefox

Firefox still uses the prefixed version, so add -moz-box-sizing: border-box; before your box-sizing declaration.

input type text width is different in chrome and firefox

I solved my problem by setting border: 1px solid #ccc;. As firefox and chrome differently behaves the border-style by default.

---

Related Topics