Question

hi i have made a simple css class and i have increased the height of the text box .
the problem is that the text starts near the top in IE7 (as if i have not changed the height).
but in Firefox the text appears vertically aligned.
now my question is that how can i make the text in the vertical middle of the box in internet explorer
here is my css

.textfield{
    height:40px;
    width:300px;
    border: 1px solid #CCC;
    font-size:20px;
    color:#999;
}

and this is my html

<input name="" type="text" value="" class="textfield">

Answer 1

I don’t have IE7, so I can’t test this out, but my suggestion is that you can try to use padding instead of setting an actual height. That way I believe you will get the equal amount of spacing above and below the text, thus causing the text to look vertically aligned.

.textfield{
    padding:10px 0;
    width:300px;
    border: 1px solid #CCC;
    font-size:20px;
    color:#999;
}

Of course you will have to experiment with the amount of padding to use, I put 10px in as an example.