Комментарии 48
А просто в input background поставить мозг не позволяет?
какой бэкгдаунд?
background:url(http://habrahabr.ru/pictures/00/00/05/46/17/picture_1.png); вот такой
не знаю даже что Вам сказать.....
Убейте себя ап стену?.... Банально
Промолчу, короче
Убейте себя ап стену?.... Банально
Промолчу, короче
Не убивай себя апстену, хабрабрат! Нормальный человек оставил бы нормальную структурированную разметку, а отображение вынес бы в CSS.
А олигофрены пусть городят свои асимантичные структуры ради пары рюшечек.
И ведь не объяснишь им ничего :( Они будут кричать «Вы не ответили на мой ответ!!»
А олигофрены пусть городят свои асимантичные структуры ради пары рюшечек.
И ведь не объяснишь им ничего :( Они будут кричать «Вы не ответили на мой ответ!!»
Нормальный человек никогда не стал-бы менять оформление input, так как он и так красив и понятен в своём первозданном виде :)
Понятен — да, красив — не всегда, он разный, если у тебя Tiger/Leopard/Vista/XP, то скорее всего тебе не захочется, чтобы на сайтах инпуты выглядели как-то иначе. Но есть миллион других графических сред, например Gnome/KDE с самыми разными настройками. В целом понятно желание автора сделать красиво везде, но менять ради этого один простой тег на сложную структуру из трех — дебилизм, очень жаль, что такие сайты есть. Это гораздо хуже табличной верстки :)
В Gnome/KDE пользователь точно настроит как ему нужно. Я например привык к стандартным элементам HTML формы (у меня OS X), они мне нравятся. Когда вижу эти элементы в непривычном оформлении - мне это не нравится.
Представьте - вы работаете в офисе с температурой +23 градуса, вам комфортно. Вдруг входит эскимос в шубе, с морозильной установкой и понижает темературу до +4, говоря при этом что "так лучше" :)
Представьте - вы работаете в офисе с температурой +23 градуса, вам комфортно. Вдруг входит эскимос в шубе, с морозильной установкой и понижает темературу до +4, говоря при этом что "так лучше" :)
apple.com разве делали ненормальные люди?
видимо нет. подскажите?
ну а в данном случае можно сделать ie хак
.input input{
border:0px;
height:22px;
*height:20px;
width:100px;
font-size:12pt;
}
в 7 ие работает
.input input{
border:0px;
height:22px;
*height:20px;
width:100px;
font-size:12pt;
}
в 7 ие работает
спасибо. Помогло. запомню этот трюк. А в чем проблема не скажете? Видимо же можно и без хаков
честно говоря с такой проблемой впервые столкнулся. Может гугль что найдет.
не проблема - просто особенность ие (высота инпута исключает рамку), я тоже был немного ей раздражен. Решается именно так, как указано выше - то есть установкой высоты для ие на 2 пикселя меньше.
решаю такие задачки иначе - селекторами, которые не понимает ие. в результате - валидный цсс.
input {height: 20px;} /* для IE */
html>body input {height: 22px;} /* не поймет IE6 */
/* или */
html>/**/body input {height: 22px;} /* не поймут IE6 и IE7 */
решаю такие задачки иначе - селекторами, которые не понимает ие. в результате - валидный цсс.
input {height: 20px;} /* для IE */
html>body input {height: 22px;} /* не поймет IE6 */
/* или */
html>/**/body input {height: 22px;} /* не поймут IE6 и IE7 */
Забыл добавить: все правильные браузеры скушают именно вторую или третью строку, потому как уточненные селекторы по спецификации имеют более высокий приоритет. В случае наличия обеих строк воспримут вторую (так как вторая и третья - абсолюно одинаковы, дублирующийся селектор будет проигнорирован).
я тоже было начал рыть в сторону рамки, но потом решил, что о чем речь, если она установлена на 0 пикселей.
получается height* = height + border = height* + 0;
получается height* = height + border = height* + 0;
судя по всему, в случае отсутствия рамки инпут увеличивается на ее размер. В этом и соль.
? какой размер у рамки может быть в случае ее отсутствия? Особенно когда явно указано, что её ширина — 0px
Это же ИЕ, в нем у некоторых элементов механика отличается. У инпутов в частности.
Как я в свое время определил проблему: изначально инпут имеет двойную рамку, причем рисуется она особым образом - внешняя рамка - нормальная, внутренняя работает как отступ (что и дает нам лишние 2 пикселя). В случае отключения рамки инпут расширяется на этот отступ.
А вообще мне кажется, что в такой ситуации не важно, почему инпут работает именно так. Проблема есть - проблема решается. Тут теория беполезна.
Как я в свое время определил проблему: изначально инпут имеет двойную рамку, причем рисуется она особым образом - внешняя рамка - нормальная, внутренняя работает как отступ (что и дает нам лишние 2 пикселя). В случае отключения рамки инпут расширяется на этот отступ.
А вообще мне кажется, что в такой ситуации не важно, почему инпут работает именно так. Проблема есть - проблема решается. Тут теория беполезна.
всё дело в line-height
Доктайп есть/нету?
есть
a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-t…”>
a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-t…”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-t…”&rt;
простите
простите
Хоспати, инпут в спане и диве.
<button><html /></button>
<button><html /></button>
В чем заключалась проблема запостить сей пост на какой нибудь винградный форум?
Не знаю парни аб чём вы тут трёте. Я сам не из дизайнеров. Но с XML знаком. Как можно обсуждать детали вёрстки имея в коде такую вот конструкцию?
Тег img вообще не закрыт. Хоть бы вот так поставили хвост. />
Или пока я сегодня днём работал, какая-то морда поменяла все принципы написания XML? Э?
<span><input /></span>Тег img вообще не закрыт. Хоть бы вот так поставили хвост. />
Или пока я сегодня днём работал, какая-то морда поменяла все принципы написания XML? Э?
НЛО прилетело и опубликовало эту надпись здесь
<div class="field"><div><div><div><input type="text"/></div></div></div></div>
Остальные исходники с картинками по ссылке: http://narod.ru/disk/487112000/field.zip…
Остальные исходники с картинками по ссылке: http://narod.ru/disk/487112000/field.zip…
Спасибо за вопрос!
Из комментов узнала новый способ "выравнивания" высоты слоев под разными браузерами =)
Из комментов узнала новый способ "выравнивания" высоты слоев под разными браузерами =)
попробуйте отрегулировать с помощью следующего трюка (прописывается в CSS):
top: 12px; -top: 6px;
"top" принимают все нормальные браузеры
а IE принимает последующий "-top"
если голова на плечах есть, догадаетесь, как дальше ;)
я так делал скругленное поле для IE
top: 12px; -top: 6px;
"top" принимают все нормальные браузеры
а IE принимает последующий "-top"
если голова на плечах есть, догадаетесь, как дальше ;)
я так делал скругленное поле для IE
line-height:1em; или line-height:100%; на .input
в зависимости от doctype и описывающего css кода.
в зависимости от doctype и описывающего css кода.
НЛО прилетело и опубликовало эту надпись здесь
Вариант 1:
Положить в слой с
http://plugins.jquery.com/project/jquery-roundcorners-canvas
Если таких элементов немного, то jquery не страшно. В IE6 гораздо более сносно, чем позиционированные блоки с уголками - всё делает само по себе.
Вариант 2:
Если есть желание, чтобы работало без скриптов - всё-таки, я бы выбрал табличку 3x3, в данном случае это минимальное зло, кто бы не говорил, кода получится меньше, чем трюки с кучкой вложенных слоёв и лишними CSS с хаками.
Положить в слой с
http://plugins.jquery.com/project/jquery-roundcorners-canvas
Если таких элементов немного, то jquery не страшно. В IE6 гораздо более сносно, чем позиционированные блоки с уголками - всё делает само по себе.
Вариант 2:
Если есть желание, чтобы работало без скриптов - всё-таки, я бы выбрал табличку 3x3, в данном случае это минимальное зло, кто бы не говорил, кода получится меньше, чем трюки с кучкой вложенных слоёв и лишними CSS с хаками.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Публикации
С версткой в IE