How do I use a buttom image with the following search form code?

[OurJud]

Here is the simple search form code I'm using on my blog, but I'd like to add an image as a button. I can find a suitable image and such, I just need to know how to ammend the code below to include the buttom image. I'd like it positioned on the end of the search field, with about a 2px gap between the two.

Thanks.

<form id="searchthis" action="/search" style="DISPLAY: inline" method="get"><input id="search-box" style="BORDER: 1px solid #ccc; FONT-FAMILY: arial; FONT-SIZE: 11px; MARGIN: 0px 0px 0px 0px; COLOR: #000; text-align: left; padding: 3px; background: #fff; font-style: italic;" value="click here to search..." name="q" autocomplete="off" onclick="this.value=&quot;&quot;;" size="25" type="text/" /></form>

[shankar.adodis]

Hi,
Write class for the button and call the image as a background
for the class this will make image to appear on the background of
your button

[OurJud]

Sorry, shankar, perhaps I should have explained that my html/css knowledge is a little lacking. I figured out how to give the buttom image a class name and position it using css, but the old-age problem of getting it to align properly in all browsers arose. I got it lined up in FF, but it's slightly out in IE - as for how it looks in the ever-growing range of other browsers I dread to think. I found a site which described displaying the search box and button as one image, so that it would be lined up in whatever browser it was viewed in, but the instructions were beyond me.

For what it's worth, this is how it currently looks (although I'm constantly working on it so it could look like anything at any given time)

http://2alkbox.blogspot.com/