IE6 and IE7 Input padding CSS

Question

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 and 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.

Answer 1

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 */
}

Answer 2

Hi you can use this

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

if input form height is 50px than use like this. * attack to IE6 and IE7 so you can use this with add *.

Answer 3

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; }