problem with html buttons in IE8

[livez]

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


<button id="ctl00_buttonSearch" class="btn" type="submit">
<span>Search</span>
</button>


and here´s the css


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



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: http://beta.nordicnet.se/

[Coyotelab]

add width: ;

[livez]

to button or label or both? Is that really valid css? I tried, and got this warning:

Missing a property value in the "<property> : <value>" declaration

and problem seemed to remain.

[Coyotelab]

div#search-form button.btn {
background:transparent url(../images/sections/search/btn-right.jpg) no-repeat scroll right center;
font-size:1.1em;
margin:0 5px 0 0;
width: 21px;
height: 21px;
}