Incorrect vertical alignment in IE8

Question

The default text in my search box looks fine in Chrome, FF, and Safari (vertical-align: middle).

However, the default text rises to the top of the search box in IE 8.

Is there a workaround for IE? Thanks for your help.

HTML:

<div class="search-form">
    <form action="#">
            <fieldset>
                    <legend class="hidden">Search Form</legend>
                    <input class="text coming-soon" type="text" value="Search" title="Search" />
                    <input class="submit" type="submit" value="Search" />


               </fieldset>
        </form>
</div>

CSS:

.search-form {
    float: right;
    padding: 0px 0 0 30px;
}
.search-form form {position: relative;}
.search-form fieldset {position:relative;}
.search-form .text {
    float: left;
    margin:0; 
    padding: 0px 5px 0 45px;
    height: 47px;
    width: 190px;
    border:solid #fff;
    border-width:0 1px 0 0;
        -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background:#fff;
        font-size: 18px;
}
.search-form .submit {
    position:absolute;
    top:13px;
    left:15px;
    margin: 0 12px 0 0;
    border-style: none;
    padding: 0;
    height: 22px;
    width: 19px;
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
    background: url('../images/btn.gif') no-repeat;
    cursor: pointer;
}

Answer 1

Have you tried setting the line height to match the height of the text box? The text should automatically appear in the middle of the line