Уплывающий фон поисковой формы в шаблоне WordPress

backgrskip.pngСпасибо за наводящий вопрос одному из читателей блога Вебсовет. Суть вопроса такова: в одном из шаблонов Вордпресс есть любопытный глюк, который проявляется только в браузере IE. Поисковая форма в данном шаблоне выполнена с применением фонового рисунка. Это довольно распространенный прием в шаблонах ВП, да и не только в них. И вот когда в поле ввода пишется достаточно длинный текст, превышающий размер самого поля, то фон съезжает влево, пока не исчезнет весь.

Выглядит довольно забавно, но впечатление от сайта портит конкретно. В чем же причина? Если посмотреть набор правил в файле css для формы поиска, то можно заметить, что фон прописан не для самой формы, а лишь для ее внутреннего элемента input с идентификатором #s. Это так же часто повторяющийся прием в шаблонах ВП:

#searchform {
overflow: hidden;
}
#s {
background: url(images/search.gif) no-repeat;
width: 131px;
height: 21px;
padding: 2px 5px;
margin: 10px 0 0 15px;
}

Чтобы избавиться от проблемы, нужно несколько видоизменить эти два набора правил. Например, вот таким образом:

#searchform {
background: url(images/search.gif) no-repeat;
width: 131px;
height: 21px;
}
#s {
background: transparent;
width: 120px;
margin: 3px 0 0 5px;
}

Что мы сделали. Во-первых, перенесли фон и размеры используемой картинки непосредственно к идентификатору формы (#searchform). Во-вторых, у идентификатора #s фон сделали прозрачным (transparent), убрали поля (padding), и поправили значения отступов (margin), добавив при этом размер элемента по ширине. Напомню, что этот идентификатор принадлежит элементу input формы. По ширине он должен быть чуть меньше, чем сама картинка фона. Например, 120px. Последнее телодвижение нужно для того, чтобы вводимый текст не вылезал за пределы фона вправо и, кроме того, он избавил нас от используемого ранее правила overflow:hidden; Значениями отступов (margin) можно регулировать взаимное расположение фона и вводимого текста.

Небольшой хинт: если в вашем листе стилей все еще не прописан общий сброс для рамок, отступов и полей (что я настоятельно рекомендую сделать), то для элемента input с идентификатором #s необходимо добавить правило border: 0; Иначе вы получите некрасивую рамку внутри вашей красивой картинки. Напомню, общий сброс пишется в самом начале листа стилей css таким вот образом:

* {border: 0; margin: 0; padding: 0;}

12.01.2010

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: