строка ПОИСК

[lspanec]

Здравствуйте. Первая тема, первый раз. Прошу прощения, если где-то что-то не так.

Собственно проблема в следующем. Взялся верстать макет сайта где-то месяц назад. Новичок в этом деле. Опыта 0.

Строка поиска уже вторые сутки мучает. Все как бы можно и могу сделать вот только отображение в Хроме и паралельно ИЕ+Мазила разняться.

Конкретно дело в рамке, которая должна обрамлять только строку ввода текста с трёх сторон. Вот скриншот http://rghost.ru/56239174 на котором в фотошопе псд файл и выше то ,что я уже получил. Дальше iq моего не хватает. Прошу помощи.

Код который накидал вот: http://jsfiddle.net/lspanec/xxTu3/       

 

Постараюсь еще раз описать:

 -что надо: добавить рамку только с левой стороны строки поиска(поле ввода). На псд файле надеюсь видно. Толщина 1px, ничего казалось бы необычного.

-проблема: если делать по размеру, то в хроме отображаеться с точностью до пикселя, а вот в мазиле и експлорер рамка вылазит вниз на 2 пикселя и вправо соответсвенно на 1 вроде.

Как то так...

[npofopr]

Вы же сами указали border-width: 0; откуда рамке то взяться тогда?

Вы пример свой обновите, до того состояния, что у вас на скриншоте.

Edited June 8, 2014 by npofopr

[lspanec]

Хорошо. Обновил. Добавил рамку. Так строка поиска выглядит только в хроме, а в Mozille и IE... НЕТ.

Как бы то что я делаю, понятно, не совсем правильно.

Подсказал бы кто как избежать этой проблемы?!

Наглядно: в хроме показывает так http://rghost.ru/56246928

Добавляем маржин-лефт: -1пиксель;(а то кнопка съезжает)  получаем  в IE и Mozille вот так http://rghost.ru/56247041

Edited June 8, 2014 by lspanec

[npofopr]

Вы при обновлении только ссылку на jsfiddle тоже обновляйте.

 

Вот http://jsfiddle.net/npofopr/xxTu3/6/ как то так.

вся соль в 

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

[lspanec]

Ура! Все корректно! )) Работает! Спасибо! Соль просто не употребляю, все-таки надо бы хоть иногда)

Теперь меню поплыло) но это уже другая история)

Вам еще раз спасибо! Риспект отправляется в город Пермь