aligning image next to textbox

Question

I am having difficulty in aligning an image next to a text box. I was wondering if there is an easy way to do it other than setting padding and margin. because those measures can vary in each browsers. I have made a fiddle http://jsfiddle.net/wD5T9/

<div id='searchWrapper'>
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/><img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/>
</div>

Answer 1

Just add to the CSS:

#searchWrapper img {
    vertical-align: middle;
}

Answer 2

Whenever I try to position something very delicately, I chose to use this sort of method:

position:relative;

and then I define by using top, left, right and buttom.

http://jsfiddle.net/wD5T9/5/

Hope this helps