Reputation: 18253

Css style problems on input in IE8

I have a problem getting the text in an input to show correct in Internet Explorer 8. Firefox, Safari and Chrome all show the same.

Firefox, Safari and Chrome

Internet Explorer 8

    <form action="" method="get">
       <input id="q" name="q" type="text">
       <input id="s" name="s" type="submit" value="Sök">
    </form>

#q {
    background:url(../../image_layout/search_field.png) no-repeat;
    width:209px;
    height:32px;
    padding:0 5px 0 5px;
    text-align:left;
    margin:0;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#09305b;
    font-weight:bold;
    position:absolute;
    left: 0px;
    top: 19px;
}
#s {
    background:url(../../image_layout/serach_buttom.png) no-repeat;
    width:56px;
    height:34px;
    padding:0;
    margin:0;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    border:0;
    position:absolute;
    left: 225px;
    top: 17px;
}

Upvotes: 19

Answers (9)

suzumakes

Reputation: 770

I can't comment yet, Matthew's answer worked for me, but in case people wanted an IE-only wrapper without searching anywhere else:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    line-height: 20px;
}

Upvotes: 0

varkadov

Reputation: 1

Just use

line-height: 34px!important;
height: 34px;

Upvotes: 0

Paul E. Stanciu

Reputation: 181

Try setting a line-height targeting IE8 and below, like this:

line-height: 32px\9;

line-height value should be equal to input's height and \9 will target IE8 and below.

Upvotes: 2

sinner

Reputation: 1

I had much trouble with that, and finally i resolved it:

for ex. you set

  INPUT {
   line-height: 44px
}

and...

  INPUT:focus {
    line-height: 45px
 }

this one...f... pixel makes the difference (focus shoud have +1px more than normal) and now you have your cursor in good position at IE8.

Upvotes: 0

keen

Reputation: 11

The position of input should be position:absolute; in order for line-height:37px; and display:inline; to work.

Upvotes: 1

Shimon Rachlenko

Reputation: 5517

There is a CSS3 rule: the box-sizing. This rule is supported by IE8.

The IEs(including IE8) have non-standard box model, where padding and border are included into width and height whereas other browsers go with standard and don't include padding and border into width . It is described in detail here.
By setting the box-sizing to content-box you tell the browsers not to include border and padding into width, and if you set box-sizing: border-box, all browsers will include border and padding into width. This or this, the display will be consistent across all modern browsers(not that IE8 is so modern, but it supports this rule too :).

Upvotes: 11