Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Firefox, Safari and Chrome

Internet Explorer 8

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;
}
like image 711
jamietelin Avatar asked Mar 10 '11 11:03

jamietelin


4 Answers

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

like image 56
Matthew Abbott Avatar answered Oct 17 '22 03:10

Matthew Abbott


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

like image 38
Shimon Rachlenko Avatar answered Oct 17 '22 03:10

Shimon Rachlenko


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

like image 5
bergie3000 Avatar answered Oct 17 '22 02:10

bergie3000


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

like image 2
Munim Avatar answered Oct 17 '22 03:10

Munim