Css background mit input

hi leute,
ich habe folgens problem und zwar habe ich eine suchfeld mit einer lupe als bild… jetzt habe ich das inputfeld verschoben und die das bild liegt jetzt unter dem inputfeld.

wie könnte ich das problem lösen:?
mfg
philgrafix

html:

<div id="search"> <input type="text" value="Search..." onfocus="if (this.value == &#39;Search...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Search...&#39;;}"> <div class="button-search"></div> </div>

css:

#search { width: 218px; float: left; z-index: 15; } .button-search { background: url('../images/button-search.png') center center no-repeat; width: 28px; height: 35px; cursor: pointer; margin: -35px 0 0 0; float: right; } #search input { background: #FFF; padding: 1px 33px 1px 5px; margin: 20px 0 0 0; width: 182px; height: 32px; border: 1px solid #CCCCCC; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; z-index: 14; }

Wenn du den Hintergrund zentrierst, wird er vermutlich auch unter dem Inhalt liegen ;o)
Wenn man das anders haben will, kann man den Inhalt etwa per padding zur Seite rücken und den
Hintergrund an die freie Stelle verschieben. Neben padding gibt es da natürlich noch diverse
mehr oder weniger aufwendige Möglichkeiten. Je nachdem, wie man es genau macht, kann es auch
hilfreich sein, das input als Blockelement zu verwenden, weil sonst weniger von den nützlichen
Eigenschaften darauf wirken.
Die generelle Idee wäre also, den Inhalt so anzuordnen, daß irgendwo ausreichend Platz ist und
statt ‘center center’ eine geeignete Position für das Hintergrundbild zu notieren.