Button/Input CSS-Problem

[Markus]

Hallo zusammen,

Ich will ein Input-Feld direkt neben einen Button "legen", jedoch sind in allen browsern (ausser IE) die beiden Felder in der Höhe nie exakt aneinander ausgerichtet :s

gibt es irgendeinen Trick, damit beide felder direkt aneinander liegen ohne einen Unterschied in der Höhe???

Danke schon einmal!

  
<style type="text/css">  
#addtocart {  
 margin-top:15px;  
 margin-bottom:15px;  
 border:0;  
 width:156px;  
}  
#addtocart input {  
 border:0;  
 width:36px;  
 height:22px;  
 background-color:yellow;  
}  
#addtocart button {  
 background-color:red;  
 background-repeat:no-repeat;  
 height:22px;  
 width:120px;  
 border:0;  
 text-decoration:underline;  
 color:#ffffff;  
}  
</style>  
  
<form>  
 <div id="addtocart"><input type="text"><button type="submit">dssdfsdf</button></div>  
</form>  
  

[bleicher]

Grüße,
zeile/button sind browser-spezifisch, du kanst natürlich ein link wie ein button aussehen lassen ud diesen per css anpassen, aber ich würde davon abraten.
MFG
bleicher

[Osiris]

Versuchs damit:

<style type="text/css">
#addtocart {
 margin-top:15px;
 margin-bottom:15px;
 border:0;
 width:156px;
 background-color: lime;
 vertical-align: top;
}
#addtocart input {
 border:0px;
 width:36px;
 height:22px;
 background-color:yellow;
 vertical-align: top;
 float: left;
}
#addtocart button {
 background-color:red;
 background-repeat:no-repeat;
 height:22px;
 width:120px;
 border:0;
 text-decoration:underline;
 color:#ffffff;
 vertical-align: top;
  float: left;
}
</style>

<form>
 <div id="addtocart">
    <input type="text" value="test"/>
    <button type="submit">dssdfsdf</button>
 </div>
</form>