Positionierungsproblem von Input Feld mit Hintergrundbild

[Fabian]

Hallo!

Ich habe ein Suchfeld das ich ganz fancy mit einem Hintergrundbild und ohne Rahmen haben will. Das klappt auch sehr gut. Auch der zugehörige Button als Bild ist wunderbar.

Was nicht klappt ist die beiden bündig nebeneinander zu bekommen. Das Inputfeld ist nach unten verschoben und ich bekomme es nicht richtig positioniert.

Irgendwie hängt's und ich tüfftel jetzt schon Stunden daran rum, aber es tut nicht.

Der HTML Code:

<div id="seite">  
  <div id="kopf">  
    <div id="suche" class="right">  
      <input type="text" id="suchbegriff" name="suche" />  
      <input type="image" src="./bilder/search_button.png" id="search-button" />  
    </div>  
    <div id="langmenu" class="right">de | en</div>  
    <br class="clear" />  
  </div>  
</div>

Das CSS:

* {  
	margin: 0px;  
	padding: 0px;  
}  
  
body {  
	width: 100%;  
}  
  
#seite {  
	margin: 0px auto;  
	margin-top: 25px;  
	width: 1000px;  
}  
  
#kopf {  
	background-color: #FFF;  
	height: 198px;  
}  
  
.clear {  
	clear: both;  
}  
  
.right {  
	float: right;  
}  
  
.abstand-header-content {  
	margin-top: 15px;  
}  
  
/**********************************/  
/* Suche */  
/*********************************/  
#suche {  
	height: 18px;  
	width: 160px;  
}  
  
#suchbegriff {  
	background: transparent url(bilder/search_bg.png) no-repeat 0px 0px;  
	height: 14px;  
	width: 120px;  
	border: none;  
	padding-left: 10px;  
	padding-top: 2px;  
	padding-bottom: 2px;  
	font-size: 11px;  
}  

Zum Anschauen: Showcase

Bin offen für jede Art von geistigem Input!

Danke!

Gruß
Fabian