Это лучшее, что я мог сделать до сих пор, используя таблицы (проверено в Firefox, Chrome и IE8).Однако вы можете заметить небольшое расхождение в IE8.
Если вы используете этот код, вам нужно поместить фоновое изображение в вашу кнопку.Любой текст может испортить макет.Не могу поверить, что так сложно даже попытаться сделать такие простые вещи.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="firstTd">
<div class="styleOne">
<input id="searchEntry" value="" title="Search" size="41" type="text" name="searchEntry"/>
</div>
</td>
<td>
<div>
<button value="Search" class="buttonStyle" type="submit" name="myButton">
<span></span>
</button>
</div>
</td>
</tr>
</table>
table {
width: 342px;
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
position: relative;
border-bottom: 1px solid transparent;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td, th {
display: table-cell;
vertical-align: inherit;
}
td.firstTd{
width: 281px;
}
div.styleOne {
background-color: #fff;
border: 1px solid #d9d9d9;
border-top-color: #c0c0c0;
height: 27px;
display: block;
width: 281px;
}
input#searchEntry{
font-size: 20px;
width: 278px;
}
button.buttonStyle{
padding: 12px 22px;
}