Javascript seems to be moving form text down about 5 pixels

Question

Hello,

I am using a form entry field that seems to be effected by some Javascript that I am using on it. For whatever reason, the text entered into the field is about 5 pixels too low. These seems to be happening because of the Javascript.

The problem with the text being 5 pixels too low is that lower-case letters like "g", "j", etc. are extending below the bottom of the field.

How could I raise the text entered into the field by about 5 pixels?

Thanks in advance,

John

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 code for the form entry field:

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

The CSS:

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

.checkMax3
    {
    height:30px;
    text-align: left;
    vertical-align:top;
    margin-bottom:10px;
    padding:2px;
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    line-height: 30px;
    color:#000000;
    }

.commchar2
    {
    display: block;
    margin-left: 0px; /* The 30px from the left you wanted */
    font-family:Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color:#000000;
    padding-top: 0px;
    }