CODEWITHSUNDEEP
htmlcssformsinternet-explorer
jcoahd
jcoahd

Reputation: 723

Vertically center text in text input in Internet Explorer

I am having trouble vertical aligning text in an input field in Internet Explorer.

I have:

input#search {
    float:left;
    font-size:11px;
    height:20px;
    margin:0;
    padding-left:4px;
    width:100px;
}

In Firefox and Chrome, it seems to be automatically vertical aligned, however in Internet Explorer it is not.

Upvotes: 11

Views: 32370

Answers (5)

gamliela
gamliela

Reputation: 4099

Check the parent div. If it's empty you need to add content (&nbps;) so explorer will calc the height correctly.

Upvotes: -1

Chinni
Chinni

Reputation: 137

Just define line-height and height for a text box with same value. It will be taken care

Upvotes: 8

Paulo Bueno
Paulo Bueno

Reputation: 2569

Just set the height and line-height for the input object and it works fine (ie 7+).

input { border: 0; font-size: 0.8em; height: 32px; line-height: 32px;}

gl Paulo Bueno

Upvotes: 45

Marcel
Marcel

Reputation: 28087

Setting line-height:1 might mitigate the vertical alignment and a bit of padding:.15em should add some breathing space to the fields too.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382806

You can use IE conditional comment like this:

<!--[if IE]>
input#search{
  padding-top:3px;    /* adjust value */
}
<![endif]-->

Upvotes: 1

Related Questions