قرار دادن دکمه textbox کنار هم

[css-man]

دوستان من یه فیلد جستجو دارم که عکسشو میزارم ببینید

هر کاری میکنم این دوتا درست کنار هم قرار نمی گیرن با اینکه ارتفاع هر 2 20 پیکسل هست ولی textbox بزرگتر از دکمه میشه حدود یک پیکسل

لطفا راهنمایی کنید
101310

[سعید کشاورز]

سورست رو بزار ببینیم داستان چیه

[css-man]

<form id="searchform" action="<?= $siteurl; ?>fa/pages/suggestion/">
<input type="text" size="30" value="جستجو در محصولات" id="inputString"
onkeyup="lookup(this.value);" onfocus="this.value=''; return false;" onblur="this.value='جستجو در محصولات'; return false;" />
<input type="submit" name="submit" value=" ">
</form>







.search
{
margin-right:5px;
margin-top:15px;
float:right;
padding:0;
}
.search input[type=text]
{
height:20px;
width:150px;
font-size:12px;
margin-top:0;
background: rgb(251,251,251); /* Old browsers */
background: -moz-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(210,210,210,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,1)), color-stop(100%,rgba(210,210,210,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(210,210,210,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(210,210,210,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(210,210,210,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(251,251,251,1) 0%,rgba(210,210,210,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#d2d2d2',GradientType=0 ); /* IE6-9 */

border-top-left-radius:5px;
border-bottom-left-radius:5px;

}
.search input[type=submit]
{
width:40px;
height:20px;
background-color:#b81b22;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
margin-left:-10px;
background: rgb(178,28,33); /* Old browsers */
background: -moz-linear-gradient(top, rgba(178,28,33,1) 0%, rgba(178,28,33,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,28,33,1)), color-stop(100%,rgba(178,28,33,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(178,28,33,1) 0%,rgba(178,28,33,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(178,28,33,1) 0%,rgba(178,28,33,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(178,28,33,1) 0%,rgba(178,28,33,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(178,28,33,1) 0%,rgba(178,28,33,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b21c21', endColorstr='#b21c21',GradientType=0 ); /* IE6-9 */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */

}





سی اس اس هم گذاشتم
مرسی که وقت میذاری

[2undercover]

فکر می کنم بدلیل تفاوت padding ها توی این دوتا هست به فایل css ات این رو اضافه کن:
padding: 3px;

[سعید کشاورز]

عین همین کدهات رو کپی کردم نتیجه این شد..بدون اینکه تغییری ایجاد کنم ..ارتفاع دکمه هم اندازه تکست باکس بود..