Проблемы с CSS и стилизацией тегов ввода для панели поиска

Question

Вот код CSS, с которым я работаю:

    #navigation input#search_bar {
        background: url(images/searchbar.png) no-repeat;
        border: none;
        height: 20px;
        width: 156px;
        margin: 0;
        }

    #navigation input#submit {
        background: url(images/submit.png) no-repeat;
        width: 30px;
        height: 20px;
        margin-left: -30px;
        border: none;
        }

HTML:

<div id="navigation">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">contact us</a></li>
    </ul>

        <input id="search_bar" type="text" name="search_bar" />
        <input id="submit" type="submit" name="search_submit" value="" />
</div>

Кнопка отправки никогда не находится в строке поиска, но может располагаться как над, так и под ней на небольшую или большую величину в зависимости от браузера.

Пример:

альтернативный текст http://img196.imageshack.us/img196/40/exampleq.png

Вот два изображения, с которыми я работаю:

альтернативный текст http://img402.imageshack.us/img402/7587/submit.png

альтернативный текст http://img138.imageshack.us/img138/6936/searchbarg.png

Полный код:

HTML - http://pastebin.com/m53c47215

CSS - http://pastebin.com/m698b11f8

Answer 1

Вероятно, у вас будет больше успеха с атрибутом position, чем с полем left. Как следует из названия, это предпочтительный метод позиционирования элементов в CSS. На самом деле, использование чего-либо другого обычно не одобряется из-за несоответствия браузера.

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

form {
   position: relative;
   }

form input#submit {
   position: absolute;
   right: 0px;
   top: 0px;
   }

Само собой разумеется (но я так или иначе), вы можете настроить значения пикселей по своему вкусу.

Answer 2

Это похоже на проблему с вертикальным выравниванием. Попробуйте добавить display: inline-block; в поле поиска и кнопку отправки.

Answer 3

Добавить vertical-align:middle; (или любое другое значение) к обоим входам:

#navigation input#search_bar {
    background: url(images/searchbar.png) no-repeat;
    border: none;
    height: 20px;
    width: 156px;
    margin: 0;
    vertical-align:middle;
    }

#navigation input#submit {
    background: url(images/submit.png) no-repeat;
    width: 30px;
    height: 20px;
    margin-left: -30px;
    border: none;
    vertical-align:middle;
    }

http://jsbin.com/obumo/2/edit

Answer 4

Возможно, Трэвис прав, если нет, вы также можете попытаться установить значения полей / отступов в 0. И вместо отрицательного поля используйте

position: relative;
left:-30px

И, конечно, вы можете использовать эти потрясающие фреймворки, которые облегчили мою жизнь и стали более удобными для кросс-браузерной CSS