Fabian: Positionierungsproblem von Input Feld mit Hintergrundbild

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

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

    Du kennst vertical-align?
    Du kennst den Einfluss von Whitespace bei Inline-Elementen?

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Du kennst vertical-align?

      Kannte ich, aber hatte ich verdrängt. Klappt ganz gut damit!

      Du kennst den Einfluss von Whitespace bei Inline-Elementen?

      Nein. Kannst Du da noch ein paar Wörter zu fallen lassen?

      Danke!

      Gruß
      Fabian

      1. Du kennst vertical-align?
        Kannte ich, aber hatte ich verdrängt. Klappt ganz gut damit!

        Du kennst den Einfluss von Whitespace bei Inline-Elementen?
        Nein. Kannst Du da noch ein paar Wörter zu fallen lassen?

        Leider nicht mehr

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische