Incorrect vertical alignment in IE8

css internet-explorer-8
JMan picture JMan · Oct 8, 2010 · Viewed 27.8k times · Source

The default text in my search box looks fine in Chrome, FF, and Safari (vertical-align: middle).

However, the default text rises to the top of the search box in IE 8.

Is there a workaround for IE? Thanks for your help.

HTML:

<input type="text" class="text" value="Search" title="Search" />

CSS:

.text {
    height: 47px;
    font-size: 18px;
    margin: 0; 
    padding: 0 5px 0 45px;
}

Answer

Stuart Burrows picture Stuart Burrows · Oct 9, 2010

Have you tried setting the line height to match the height of the text box? The text should automatically appear in the middle of the line

Related questions

Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?

Why the following example shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8? HTML: <div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div> CSS: div { width: 60px; height: 60px; border: 1px …

Read More
Opacity of div's background without affecting contained element in IE 8?

I want to set Opacity of div's background without affecting contained element in IE 8. have a any solution and don't answer to set 1 X 1 .png image and set opacity of that image because I am using dynamic opacity and color …

Read More
Opacity CSS not working in IE8

I'm using CSS to indicate the trigger text for a jQuery slide-down section: i.e. when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that …

Read More