Javascript seems to be altering form field style

Question

Hello,

The form with the class="checkMax3" below displays text a few pixels lower than it should. In Chrome, letters like lower-case "p" and "q" extend below the bottom of the field. In IE 8, the bottom portion of these same letters does not display.

If I recall correctly, this problem started after I applied the Javascript below to the field.

Any idea how I can make it so letters like "q" and "p" can fit entirely into the field? The field seems high enough to contain the letters, but the text appears to be about 5 pixels too low in the field.

Thanks in advance,

John

The javascript:

<script language="javascript" type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
    setMaxLength();     
    $("input.checkMax3").bind("click mouseover keyup change", function(){checkMaxLength(this.id); } )
});
function setMaxLength() {
    $("input.checkMax3").each(function(i){
        intMax = $(this).attr("maxlength");
        $(this).after("<div class='commchar2'><span id='"+this.id+"Counter'>"+intMax+"</span> characters remaining</div>");
        });
    }
function checkMaxLength(strID){
        intCount = $("#"+strID).val().length;
        intMax = $("#"+strID).attr("maxlength");
        strID = "#"+strID+"Counter";
        $(strID).text(parseInt(intMax) - parseInt(intCount));
        if (intCount < (intMax * .8)) {$(strID).css("color", "#006600"); } //good
        if (intCount > (intMax * .8)) { $(strID).css("color", "#FF9933"); } //warning at 80%
        if (intCount > (intMax)) { $(strID).text(0).css("color", "#990000"); } //over
    }
</script>

The PHP / HTML:

echo '<form action="http://www...com/.../submit2a.php" method="post"> 
    <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">  

    <div class="submissiontitle"><label for="title">Story Title:</label></div> 
    <div class="submissionfield"><input class="checkMax3" name="title" type="title" id="title" maxlength="80"></div>  

    <div class="urltitle"><label for="url">Link:</label></div> 
    <div class="urlfield"><input name="url" type="text" id="url" maxlength="500"></div>

    <div class="submissionbutton"><input name="submit" type="submit" value="Submit"></div> 
</form>
';

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;
    line-height: 30px;
    color:#000000;
    }   

Answer 1

Your font-size is too big or the input's height and line-height are not big enough. Play with the height and line-height (making them always match) and the font-size and you will be able to get it.

EDIT:

I see your problem. The class .submissionfield that has the height, font-size and line-height styles is not an input. That class is on a div. Apply similar styles to the class .checkMax3 and it should look fine.