Centering text (vertically) inside a textbox using CSS

Question

Hi all,

I'm currently working with a textbox that has a background. I was wondering if it's possible to center text (vertically) inside the textbox.

important: it's perfectly centered in firefox. Only IE it writes it too high for some reason. I've tried line-height, padding, and margin. Nothing works. Any ideas?

EDIT: This is my current CSS. I should say that I've tried the margin-top method and it didn't work for me. Also, as I mentioned, this is only for IE. I have IE specific style sheets so no worries.

.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }
label { float: right; margin-left: 5px; font-size: 13px; }

For IE, I have the following:

.textValue { font-size: 14px; }

as for HTML:

            <tr>
                <td><label for="name">name</label></td>
                <td><input type="text" name="name" id="name" class="textValue" value="" /></td>
            </tr>

Thanks, Amit

Answer 1

I wonder how you are able to align the text in a textbox but since you say, here is the suggestion:

For idiot IE, you can use this IE specific hack:

margin-top:50px; /* for standard-compliant browsers */
*margin-top:50px; /* for idiot IE */
_margin-top:50px; /* for idiot IE */

You might want to try other similar properties if you want rather than margin-top.

Answer 2

Did you try?:

input {vertical-align: middle;}