cakephp - проблема позиционирования CSS при получении кнопки отправки и ввода текста в одной строке и замене кнопки изображением

Question

Мне удалось получить мою кнопку отправки и мой ввод на одной и той же строке в cakephp, но когда я решил заменить скучную серую кнопку отправки на изображение, они больше не выстраиваются в линию.Вместо этого ввод появляется на 8px ниже того места, где он использовался, и изображение появляется на правильной высоте.

<div class="searchForm">
    <?php
        echo $form->create('User');
        echo $form->input('Search for a friend\'s page', array('div'=>false));
        $options = array('type'=>'image','src' => 'img/searchbutton.gif','div' =>false);
        echo $form->end($options);
    ?>
</div>

вот css:

label{display:block;}
input[type=text]{width:255px;height:30px;border:1px solid #ddd;padding:3px;background:url(../img/formfieldbg.gif) repeat-x;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}

все, что выводит:

<div class="searchForm">
<form id="UserDisplayForm" method="post" action="/cakeproject/users/display" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
<label for="UserSearchForAFriend'sPage">Search For A Friend's Page</label>
<input name="data[User][Search for a friend's page]" type="text" id="UserSearchForAFriend&#039;sPage" />
<input type="image" src="img/searchbutton.gif" value="Submit" /></form> 
</div>

Может ли какая-нибудь добрая душа направить меня в правильном направлении?

Answer 1

Я был отчасти неправ, отчасти прав в своем комментарии:

Кажется, проблема в том, что input[type=text] включен vertical-align:bottom;
Пока input[type=image] включен vertical-align:top;

Итак, добавьте любую строку в ваш css:

input[type=image] {vertical-align: bottom;}

ИЛИ

input[type=text] {vertical-align:top;}

Результат не совсем одинаков, но оба входа выглядят более inline в обоих случаях (on больше похож на выравнивание по верху, а другой больше похож на выравнивание по центру).