problem with html buttons in IE8

Hello!

we got html buttons with background images set on our site. This works fine in IE6 / IE7, FF and so on. But in IE8 the button looks really strange.

Here is the html for the button (and label inside the button):

[code=html]
<button id=”ctl00_buttonSearch” class=”btn” type=”submit”>
<span>Search</span>
</button>
[/code]

and here´s the css

[code=html]
div#search-form button.btn {
background:transparent url(../images/sections/search/btn-right.jpg) no-repeat scroll right center;
font-size:1.1em;
}

div#search-form button.btn span {
background:transparent url(../images/sections/search/btn-left.jpg) no-repeat scroll left center;
color:#505050;
font-weight:normal;
height:21px;
line-height:21px;
}

[/code]

Does anyone know what we must do in order to fix this? I´ve tried altering the css but to no avail.

The buttons can be viewed here: [url]http://beta.nordicnet.se/[/url]

Also in #CSS _↴