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.

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

Solution 2

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

Solution 3

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