Varying text position in search box

Hi Im having trouble with getting IE8 to display the text in the search box in the right position as it appears in FFox or Chrome, http://tinyurl.com/y3okok3 can you tell me how to fix this?

Hi,

You’ll never get form elements pixel perfect unless you hack for each browser.

This should be closer thogh.


.searchform .s {
    background:transparent url(http://students.mitcentre.com/wp-content/themes/mitc/images/search-bar-trans.png) no-repeat scroll center top;
    margin:0;
    border: none;
[B]    padding:2px 0 0;
    height: 30px;[/B]
    position:absolute;
    right:13px;
    top:0;
    width:163px;
    color: #666;
    overflow: hidden;
[B]    line-height:30px;[/B]
}


hm for some reason its breaking in firefox when i try that code.

I tested in Firefox 3.6 and it was fine. Older Firefox seems to be the one that is a few pixels out.

As I said before it’s a matter of best fit as even Firefox shows it differently previous to 3.6.

Try this:


.searchform .s {
    background:transparent url(http://students.mitcentre.com/wp-content/themes/mitc/images/search-bar-trans.png) no-repeat scroll center top;
    margin:0;
    border: none;
 [B]   padding:9px 0 0;
    height: 21px;[/B]
    position:absolute;
    right:13px;
    top:0;
    width:163px;
    color: #666;
    overflow: hidden;
[B]    line-height:normal;[/B]
}


You’ll just have to tweak it until it looks ok in most.

ok thanks!