Form inputs in IE, text align problem

[matthisco]

HI folks,

The form inputs are forcing the text to appear off the bottom. Can anyone please tell me what can correct this?

Screenshot below:

screenshot

Many Thanks

[Paulie_D]

We’d need to see the HTML / CSS that you are using.

Could you make a Codepen?

[matthisco]

Thanks very much for the replies, here’s my CSS:

*, *:before, *:after { }

/* Line 150 */ button, input, select, textarea { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-family: inherit; font-size: 100%; }

/* Line 159 */ button, input { line-height: normal; }

/* Line 313 */ input, button, select, textarea { font-family: inherit; font-size: 14px; line-height: 2; }

/* Line 325 */ button, input, select[multiple], textarea { background-image: none; }

/* Line 1717 */ .form-control { display: block; width: 100%; height: 34px; padding-top: 6px; padding-right: 12px; padding-bottom: 6px; padding-left: 12px; font-size: 14px; line-height: 1.42857; color: #555555; vertical-align: middle; background-color: #ffffff; border-top-width: 1px; border-right-width-value: 1px; border-bottom-width: 1px; border-left-width-value: 1px; border-top-style: solid; border-right-style-value: solid; border-bottom-style: solid; border-left-style-value: solid; border-top-color: #cccccc; border-right-color-value: #cccccc; border-bottom-color: #cccccc; border-left-color-value: #cccccc; border-image-source: none; border-image-slice: 100% 100% 100% 100%; border-image-width: 1 1 1 1; border-image-outset: 0 0 0 0; border-image-repeat: stretch stretch; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition-property: border-color, box-shadow; transition-duration: 0.15s, 0.15s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, 0s; }

/* Line 1836 */ .input-lg { height: 45px; padding-top: 10px; padding-right: 16px; padding-bottom: 10px; padding-left: 16px; font-size: 18px; line-height: 1.33; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }

/* Line 1735 */ .form-control:focus { border-top-color: #66afe9; border-right-color-value: #66afe9; border-bottom-color: #66afe9; border-left-color-value: #66afe9; outline-width: 0px; outline-style: none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6); }

.input-lg { font-size: 14px; }

/* Line 447 */ .input-lg { height: 30px; padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 8px; line-height: 30px; }

[matthisco]

Sure here is the image again:

http://imgur.com/7tnRqRz

[matthisco]

I’ve even added this code in the head, and it still makes no difference:

    .input-lg{ padding: 0;

margin: 0;
line-height: 50px;
height: 50px;
background-color: red;
font-size: 30px;
}

[Paulie_D]

@mathisco

We’d like to help you but you aren’t helping yourself.

We need live code we can play with…not images

Serious?

Use CodePen

This…

[e6z6a6z]

that might be because of line-height
try giving a padding-bottom or decrease the line-height of your input-box

[Author]

Posts