Modifying a Form Input Field

Question

Hello,

I am using a submission form input field where the text is appearing about 2-5 pixels too low. This is causing letters like lower-case y, q, j, etc. to bleed below the box in Chrome and only partially appear in IE 8. To solve this problem, I would like the text to appear a few pixels higher in the input field, or make the input field a few pixels higher.

How could I do either?

Thanks in advance,

John

The code for the input field:

<div class="submissionfield"><input class="checkMax3" name="title" type="title" id="title" maxlength="80"></div>

The CSS:

.submissionfield
    {
    position:absolute;
    width:550px;
    left:30px;
    top:230px;
    text-align: left;
    vertical-align:text-top;
    margin-bottom:10px;
    padding:2px;
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    color:#000000;
    }

Answer 1

Set line-height to maybe 150% for input field.

Answer 2

You can target the input field using CSS in a few different ways:

input#title {
    /* Contents here */
}

.submissionfield input {
    /* Contents here */
}

.submissionfield input#title {
    /* Contents here */
}

I'd stick some bottom padding on the input, or try to increase the line-height value.

Answer 3

I'm not seeing the problem you describe using the code you included... are there any other styles defined on your page?