IE6 and IE7 Input padding CSS

I have input boxes with a height of 25 pixels. In Firefox, Safari and IE8 automatically vertically align the text of it in the middle correctly. However in IE6 a开发者_JAVA百科nd IE7 the text is aligned to the top.

How may I resolve this? Adding padding-top increased the total height of the input as I have explicitly declared its height.

I don't wish to use browser specific CSS.

Thanks.

---

The most easy fix for is to use a line-height value for example

input[type=text] { border: 1px solid #dbdbdb; height: 28px; line-height: 25px; }

---

Related issue: Chrome will do the same thing.

Solution: Decrease the height by x pixels and increase padding-top by x pixels.

eg.

input { 
    height: 15px; /* roughly 1.2 times font-size, or equal to line-height if set */
    padding: 5px 0; /* add padding to top and bottom to pad out the height to required height */
}

---

.input{
    height:50px;
    color:#F00;
    vertical-align:middle;
    *padding-top:20px;/*IE7 and IE6*/
    *height:30px;/*IE7 and IE6*/
}

If the input form height is 50px then use the above code. Note the * hack for IE6 and IE7.

---

you can used the line-height as the height of you text box.