0

Why is my input text rendered at the bottom of the input on IE10? FF and Chrome renders it in the middle as it's supposed to be.

http://jsfiddle.net/PXN2e/2/

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 6px 10px;
    width: 150px;
}
button, input, select, textarea {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}

Please don't say that the only solution is by removing the box-sizing: border-box;, I actually need this. And removing it, the input box becomes too big anyway.

enter image description here

0

3 Answers 3

2

Remove line-height from input.form-text

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    /*line-height: 30px;*/ /* Removed */
    padding: 6px 10px;
    width: 150px;
}

Demo

2
  • Solved! And I read somewhere that I had to use line-height with height so it would align with the button in same line. May 29, 2014 at 14:59
  • @OptimusPrime You can see this as a ref :) May 29, 2014 at 15:03
1

If you are giving a line-height, then remove the top/bottom padding:

Demo: http://jsfiddle.net/abhitalks/PXN2e/7/

CSS:

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px; /* <-- Remove top/bottom padding */
    width: 150px;
}

line-height will vertically align to the height if specified. So, adding extra padding may cause such problems. Moreover, you don't have to carefully calc the top/bottom padding to vertically align.

0

You can leave your line-height but just reconsile with the padding you added:

30px - 6px -6px = 18px

line-height: 18px

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.