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
– Bojangles, Commented Mar 10, 2011 at 11:10

Matthew Abbott · Accepted Answer · 2011-03-10 11:09:36Z

23

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

answered Mar 10, 2011 at 11:09

Matthew Abbott

61.7k9 gold badges108 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lejahmie Over a year ago

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.

stinaq Over a year ago

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?

tmsimont Over a year ago

@squ did you ever get a solution to the huge caret? I have the same issue

stinaq Over a year ago

@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..

DavidP Over a year ago

Worth having a look at answer below: stackoverflow.com/a/14876642/731782 solved it for me.

Shimon Rachlenko · Accepted Answer · 2013-06-17 08:22:27Z

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, 2013 at 8:22

answered Feb 14, 2013 at 14:07

Shimon Rachlenko

5,52742 silver badges51 bronze badges

2 Comments

iheartcsharp Over a year ago

+1. This was really helpful for a left padding issue I was having. Did not know IE8 supported box-sizing. Thanks!

Alexander Over a year ago

Oh IE8 ... you never know from where it hits you next ;)

bergie3000 · Accepted Answer · 2012-06-19 13:50:20Z

5

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

answered Jun 19, 2012 at 13:50

bergie3000

1,1411 gold badge15 silver badges21 bronze badges

1 Comment

Jacques Over a year ago

I take it back, that did actually work for me! Thanks Bergie3000

Munim · Accepted Answer · 2011-03-10 11:09:34Z

2

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

answered Mar 10, 2011 at 11:09

Munim

6,5802 gold badges37 silver badges44 bronze badges

Comments

Paul E. Stanciu · Accepted Answer · 2014-03-18 13:36:39Z

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, 2014 at 13:36

Paul E. Stanciu

1913 silver badges8 bronze badges

Comments

CL. · Accepted Answer · 2013-10-01 19:43:13Z

1

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

edited Oct 1, 2013 at 19:43

CL.

182k18 gold badges241 silver badges282 bronze badges

answered Oct 1, 2013 at 19:07

keen

111 bronze badge

Comments

Roopendra · Accepted Answer · 2013-12-06 14:09:14Z

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 6, 2013 at 14:09

Roopendra

7,77716 gold badges72 silver badges95 bronze badges

answered Dec 6, 2013 at 13:50

sinner

1

Comments

varkadov · Accepted Answer · 2015-03-28 14:20:01Z

0

Just use

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

answered Mar 28, 2015 at 14:20

varkadov

11 bronze badge

Comments

suzumakes · Accepted Answer · 2016-02-04 19:01:30Z

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 4, 2016 at 19:01

suzumakes

7703 silver badges12 bronze badges

Collectives™ on Stack Overflow

Css style problems on input in IE8

9 Answers 9

5 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related