Xpoint
   [напомнить пароль]

Фон у Input-а - помогите привести к общему знаменателю

Метки: [без меток]
2008-07-14 13:42:13 [обр] Илья Cтpeльцын aka SelenIT(12/171)[досье]

Наткнулся на серию тупейших затыков при попытке сделать элементарное поле ввода а-ля панель поиска в Safari (закругленные края, в левом закруглении иконка с лупой, соответственно слева отступ от края до текста). Попытался сделать "в лоб" стилями для самого инпута, вроде такого:

   border: none;
   width: 182px;
   height: 20px;
   background: #fff url(../images/searchbg.png) no-repeat 0 50%;
   font: bold 14px/20px Verdana, Arial, Helvetica, sans-serif;
   padding: 0 8px 0 20px;

Результаты:

  • в FF, Op.9 и Saf.3/Win всё почти отлично;
  • в IE7 рисуется нормально, но при переполнении поля текстом (по условию задачи ограничить maxlength так, чтобы буквы всегда помещались в рисунок, нельзя) фон убегает влево вместе с первой буквой текста. Если выравнивать его по правому краю, он не убегает, зато мерзко прыгает при выделении и удалении текста из поля;
  • в Op.8 почему-то padding-и не плюсуются к width (хотя стоит строгий доктайп!), в итоге поле оказывается обрезанным. Вдобавок, текст не желает отступать от левого края и налезает на иконку;
  • в Op.7.5 впридачу к проблеме 8-ки остается дефолтовый "объемный" бордер, накладывающийся на картинку (с этим, насколько я понимаю, ничего не поделать... или все-таки?..).

Кроме этого, браузеры упорно по-разному выравнивают текст инпута по-вертикали — FF и Safari ставят его на пару пикселей выше, чем IE и Opera 9.

Больше всего раздражает поведение IE, но и "загадочную северную красавицу" номер 8 тоже хотелось бы "укротить" малой кровью. Можно ли решить описанные проблемы, не заводя дополнительных несемантичных контейнеров (с ними-то элементарно)?

спустя 36 минут [обр] Андрей(0/2)[досье]

Уважаемый Илья Cтpeльцын aka SelenIT[досье], я плохо понимаю, зачем Вам это нужно. Простите моё невежество, но мне кажется, что "поле ввода а-ля Safari" — это одна из рюшечек, которые переводят сайт в разряд живописи в картинной галерее. Посмотрите внимательно такие сайты, как
yahoo.com
yandex.ru
rambler.ru
google.com
Предлагаю помедитировать над вопросом, почему они не делают закруглённых красивых полей ввода?
Также полезным, с дизайнерской точки зрения, бывает чтение таких сайтов, как
www.artlebedev.ru
www.artgorbunov.ru

Мой Вам совет: не обрабатывайте напильником паровоз, чтобы получить самолёт, — дело долгое и не благодатное. Кроме того, Вы никак не застрахованы от того, что с выходом в свет новой версии какого-нибудь популярного браузера к Вам не вернётся старая головная боль.

спустя 48 минут [обр] Илья Cтpeльцын aka SelenIT(12/171)[досье]

Андрей[досье], спасибо за советы. Небольшая проблема в том, что в данном случае мне досталась уже готовая "дизайнерская точка зрения", которую я всего лишь должен воплотить (заверстать) настолько кроссбраузерно, насколько можно :). Немного упрощает задачу, что эта штуковина предназначена для внутрикорпоративного пользования, но плевать на 8-ю Оперу мне, увы, не позволяется.

В общем, чует моя... хм, интуиция — придется делать лишний контейнер... :)

спустя 4 часа [обр] Fenrir(0/3)[досье]
Доверьтесь своей интуиции. Лично мне так и не удалось иначе укротить IE.
спустя 1 день 19 часов [обр] Андрей(0/2)[досье]

Да, дизайнер, который плохо знает HTML-вёрстку, — настоящая проблема. Иногда, если не получалось доказать несуразность верстки "а-ля картинная галерея", мне приходилось делать многоуровневые таблицы с распорками (прозрачный gif 1*1 растягивается до нужного размера).

Сочувствую.

спустя 6 минут [обр] Андрей(0/2)[досье]
Кстати, Илья Cтpeльцын aka SelenIT[досье], Вы пробовали ту же вёрстку пропустить через последнюю версию Оперы? Поскольку продукт предназначается для внутрикорпоративного использованию, то обновить у всех сотрудников Оперу не так уж сложно: 1 раз закачать инсталляшку и вперёд. Обоснование: "В данной версии Оперы исправлены существенные недочёты" или "Технические требования к данному продукту: ...., Opera 9.51, ..."
Ведь Вы, правда, не застрахованы от глупостей разработчиков которые они внесут в новые версии браузера.
Powered by POEM™ Engine Copyright © 2002-2005