image alignment in input field

We have a clear text icon , within an input field.

The objective is similar to Google [ ' X ' ] symbol displayed within the input element to clear the search phrase you typed etc.

Anyhoo. Works perfectly, in FF 4 But in Chrome, it is slight开发者_如何学运维ly off center. In IE it doesnt display.

I am thinking it is a combination of z-index and some crappy code on my behalf.

Any suggestions. ( the input element has a line height of 36px )

.searchreset {
background: url('../images/cancel-sprite.png') no-repeat 0px 0px;
padding-left:34px;
padding-bottom: 8px;
margin-left: -30px;
margin-bottom: 0px;
width:24px;height:24px;
line-height:36px;
vertical-align:middle;
margin-top:2px;
}
.searchreset:hover {
background: url('../images/cancel-sprite.png') no-repeat 0px -24px;
padding-left:34px;
margin-left: -30px;
margin-bottom: 0px;
width:24px;height:24px;
vertical-align:middle;
cursor:pointer;
}

What type of input are you using? If it's text, try the HTML5 <input type="search" />; Chrome will automatically add the x when a user starts typing.

For IE, you could use an element that you position over the input, rather than a background.

HTML:

<div class="searchreset">
  <input type="search" />
  <span></span>
</div>

CSS for IE only:

.searchreset { position: relative; }
.searchreset span {
  background-image: url(XX);
  display: block;
  height: 24px;
  position: absolute;
  top: XXem;
  right: XXem;
  width: 24px;
}