- This topic is empty.
-
AuthorPosts
-
November 29, 2013 at 5:16 am #157355
matthisco
ParticipantHI folks,
The form inputs are forcing the text to appear off the bottom. Can anyone please tell me what can correct this?
Screenshot below:
Many Thanks
November 29, 2013 at 5:47 am #157360Paulie_D
MemberWe’d need to see the HTML / CSS that you are using.
Could you make a Codepen?
November 29, 2013 at 6:42 am #157376matthisco
ParticipantThanks 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; }
November 29, 2013 at 6:51 am #157378matthisco
ParticipantSure here is the image again:
November 29, 2013 at 6:56 am #157380matthisco
ParticipantI’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;
}November 29, 2013 at 7:58 am #157382Paulie_D
Member@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…
December 2, 2013 at 10:53 am #157613e6z6a6z
Participantthat might be because of line-height
try giving a padding-bottom or decrease the line-height of your input-box -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.