Question

The textboxes in my HTML forms have a height of 30px, and the entered text appears in the vertical center of the textboxes, just as I want in every browser – except IE.

I’ve checked it in Chrome, FF and Opera. IE8 shows the entered text higher than the center which looks really bad. I tried playing around with the padding, margin and line-height, but cannot get the text to budge from the top edge.

Any suggestions on what CSS property do I need to edit to center the text? I could add it as a IE specific style, if needed.

The website in question is lazydragonbooks.com. Two forms immediately visible are the ‘Register’ and ‘Login’ forms.

Chrome

IE 8

Answer 1

Well, messing with IE8 developer tools I found that setting padding-bottom: 0; and padding-top: 10px; aligned the text correctly.

You would have to use a conditional statement to avoid messing up proper browsers. I would recommend using a separate stylesheet:

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

Within ie8.css..

   input[type="text"] {
            padding-top: 10px;
            padding-bottom: 0;
    }

This is of course specific to an input with the set height that you are using.