Css style problems on input in IE8

Question

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;
}

IE... Such a depressing piece of software :-( I feel your pain! One thing to try (if you haven't got it already) is to set the doctype to strict - I spent about 2 days making a site work in IE, and later realizing I'd accidentally used the Transitional doctype :-P Oh the pain. — Bojangles, Mar 10 '11 at 11:10

score 23 · Accepted Answer · answered Mar 10 '11 at 11:09

23

Try specifying a line-height: 34px or thereabouts.

answered Mar 10 '11 at 11:09

Matthew Abbott

60,571
9
104
129

Ah, the good old line-height how could I forget :) Funny that it doesn't seem to affect Firefox at all, where it already looks good. But it does the work for IE. – lejahmie Mar 10 '11 at 11:46
2

I tried this and it worked with placing the text correctly. However, in other, modern browsers the caret are now as tall as the input field, and it looks unnice.. Anyway to fix that? – stinaq Aug 07 '13 at 07:43
@squ did you ever get a solution to the huge caret? I have the same issue – tmsimont Oct 11 '13 at 16:17
@tmsimont Not really, I had to do an IE specific hack and set line height for only IE and do the regular height for the other browsers.. – stinaq Oct 14 '13 at 07:57
Worth having a look at answer below: http://stackoverflow.com/a/14876642/731782 solved it for me. – DavidP Sep 01 '14 at 19:23

Shimon Rachlenko · Answer 2 · 2013-06-17T08:22:27.107

11

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 :).

edited Jun 17 '13 at 08:22

answered Feb 14 '13 at 14:07

Shimon Rachlenko

5,469
40
51

+1. This was really helpful for a left padding issue I was having. Did not know IE8 supported box-sizing. Thanks! – iheartcsharp Apr 29 '14 at 19:50
1

Oh IE8 ... you never know from where it hits you next ;) – Alexander Feb 12 '15 at 21:57

score 5 · Answer 3 · answered Jun 19 '12 at 13:50

5

I had to set the line-height and display: inline. No idea why, but it worked for me.

answered Jun 19 '12 at 13:50

bergie3000

1,091
1
13
21

1

I take it back, that did actually work for me! Thanks Bergie3000 – Jacques Dec 04 '12 at 13:11

score 2 · Answer 4 · answered Mar 18 '14 at 13:36

2

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.

answered Mar 18 '14 at 13:36

Paul E. Stanciu

133
2
6

score 2 · Answer 5 · answered Mar 10 '11 at 11:09

2

Set a line-height property for search input field #q?

answered Mar 10 '11 at 11:09

Munim

6,310
2
35
44

score 1 · Answer 6 · edited Oct 01 '13 at 19:43

1

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

edited Oct 01 '13 at 19:43

CL.

173,858
17
217
259

answered Oct 01 '13 at 19:07

keen

11
1

score 0 · Answer 7 · edited Dec 06 '13 at 14:09

0

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.

edited Dec 06 '13 at 14:09

Roopendra

7,674
16
65
92

answered Dec 06 '13 at 13:50

sinner

1

score 0 · Answer 8 · answered Mar 28 '15 at 14:20

0

Just use

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

answered Mar 28 '15 at 14:20

varkadov

1
1

score 0 · Answer 9 · answered Feb 04 '16 at 19:01

0

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;
}

answered Feb 04 '16 at 19:01

suzumakes

760
3
12

Css style problems on input in IE8

9 Answers9