yellow_duck23 мая 2008 в 17:33

С версткой в IE

1 мин

661

Чулан

Комментарии 48

ega 23 мая 2008 в 17:41

А просто в input background поставить мозг не позволяет?

blia 23 мая 2008 в 17:43

какой бэкгдаунд?

ega 23 мая 2008 в 17:52

background:url(http://habrahabr.ru/pictures/00/00/05/46/17/picture_1.png); вот такой

yellow_duck 23 мая 2008 в 17:55

не знаю даже что Вам сказать.....
Убейте себя ап стену?.... Банально
Промолчу, короче

Proxmiff 23 мая 2008 в 22:33

Не убивай себя апстену, хабрабрат! Нормальный человек оставил бы нормальную структурированную разметку, а отображение вынес бы в CSS.

А олигофрены пусть городят свои асимантичные структуры ради пары рюшечек.

И ведь не объяснишь им ничего :( Они будут кричать «Вы не ответили на мой ответ!!»

super 24 мая 2008 в 01:55

Нормальный человек никогда не стал-бы менять оформление input, так как он и так красив и понятен в своём первозданном виде :)

Proxmiff 24 мая 2008 в 09:00

Понятен — да, красив — не всегда, он разный, если у тебя Tiger/Leopard/Vista/XP, то скорее всего тебе не захочется, чтобы на сайтах инпуты выглядели как-то иначе. Но есть миллион других графических сред, например Gnome/KDE с самыми разными настройками. В целом понятно желание автора сделать красиво везде, но менять ради этого один простой тег на сложную структуру из трех — дебилизм, очень жаль, что такие сайты есть. Это гораздо хуже табличной верстки :)

super 24 мая 2008 в 09:20

В Gnome/KDE пользователь точно настроит как ему нужно. Я например привык к стандартным элементам HTML формы (у меня OS X), они мне нравятся. Когда вижу эти элементы в непривычном оформлении - мне это не нравится.

Представьте - вы работаете в офисе с температурой +23 градуса, вам комфортно. Вдруг входит эскимос в шубе, с морозильной установкой и понижает темературу до +4, говоря при этом что "так лучше" :)

fl00r 24 мая 2008 в 10:58

apple.com разве делали ненормальные люди?

yellow_duck 23 мая 2008 в 17:47

видимо нет. подскажите?

fl00r 23 мая 2008 в 17:42

ну а в данном случае можно сделать ie хак
.input input{
border:0px;
height:22px;
*height:20px;
width:100px;
font-size:12pt;
}
в 7 ие работает

yellow_duck 23 мая 2008 в 17:46

спасибо. Помогло. запомню этот трюк. А в чем проблема не скажете? Видимо же можно и без хаков

fl00r 23 мая 2008 в 17:51

честно говоря с такой проблемой впервые столкнулся. Может гугль что найдет.

micktu 23 мая 2008 в 22:06

не проблема - просто особенность ие (высота инпута исключает рамку), я тоже был немного ей раздражен. Решается именно так, как указано выше - то есть установкой высоты для ие на 2 пикселя меньше.

решаю такие задачки иначе - селекторами, которые не понимает ие. в результате - валидный цсс.

input {height: 20px;} /* для IE */
html>body input {height: 22px;} /* не поймет IE6 */
/* или */
html>/**/body input {height: 22px;} /* не поймут IE6 и IE7 */

micktu 23 мая 2008 в 22:14

Забыл добавить: все правильные браузеры скушают именно вторую или третью строку, потому как уточненные селекторы по спецификации имеют более высокий приоритет. В случае наличия обеих строк воспримут вторую (так как вторая и третья - абсолюно одинаковы, дублирующийся селектор будет проигнорирован).

fl00r 24 мая 2008 в 07:41

я тоже было начал рыть в сторону рамки, но потом решил, что о чем речь, если она установлена на 0 пикселей.
получается height* = height + border = height* + 0;

micktu 24 мая 2008 в 07:49

судя по всему, в случае отсутствия рамки инпут увеличивается на ее размер. В этом и соль.

fl00r 24 мая 2008 в 08:00

? какой размер у рамки может быть в случае ее отсутствия? Особенно когда явно указано, что её ширина — 0px

micktu 24 мая 2008 в 08:10

Это же ИЕ, в нем у некоторых элементов механика отличается. У инпутов в частности.

Как я в свое время определил проблему: изначально инпут имеет двойную рамку, причем рисуется она особым образом - внешняя рамка - нормальная, внутренняя работает как отступ (что и дает нам лишние 2 пикселя). В случае отключения рамки инпут расширяется на этот отступ.

А вообще мне кажется, что в такой ситуации не важно, почему инпут работает именно так. Проблема есть - проблема решается. Тут теория беполезна.

Q_Zma 11 июн 2008 в 17:10

всё дело в line-height

superhabra 23 мая 2008 в 17:49

Доктайп есть/нету?

yellow_duck 23 мая 2008 в 17:53

есть
http://www.w3.org/TR/xhtml1/DTD/xhtml1-t…”>

yellow_duck 23 мая 2008 в 17:54

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-t…”&rt;
простите

n1mnul 23 мая 2008 в 17:57

Хоспати, инпут в спане и диве.
<button><html /></button>

yellow_duck 23 мая 2008 в 18:02

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

javac 23 мая 2008 в 18:01

В чем заключалась проблема запостить сей пост на какой нибудь винградный форум?

yellow_duck 23 мая 2008 в 18:05

а в чем проблема публикации поста сдесь, в соответствующем блоге?

javac 23 мая 2008 в 18:36

Прошу прощения, это на меня так конференция от Стива действует.

Steamus 23 мая 2008 в 23:12

Не знаю парни аб чём вы тут трёте. Я сам не из дизайнеров. Но с XML знаком. Как можно обсуждать детали вёрстки имея в коде такую вот конструкцию?

<span><input /></span>

Тег img вообще не закрыт. Хоть бы вот так поставили хвост. />
Или пока я сегодня днём работал, какая-то морда поменяла все принципы написания XML? Э?

НЛО прилетело и опубликовало эту надпись здесь

micktu 24 мая 2008 в 07:52

Что за мудоебы не умеют грамотно материться?

НЛО прилетело и опубликовало эту надпись здесь

fl00r 24 мая 2008 в 07:55

Что удивительно, вы не удосужились понять кода автора. В нем поле инпут может иметь любую ширину, в вашем же случае — лишь фиксированную ширину картинки.
Кроме того, ваш код в ИЕ 7 смотрится весьма устрашающе.

fl00r 24 мая 2008 в 07:55

хотя чему удивляться-то

nicothin 24 мая 2008 в 10:34

если человек пишет "...видимо, такие мудоебы и критикуют IE...", то дальше можно не читать. понятно, что мозги автора прижаты к стулу его собственным весом :)

magic4x 24 мая 2008 в 10:40

Вы в его профиль загляните :)

nicothin 24 мая 2008 в 10:49

смотрел уже :)

НЛО прилетело и опубликовало эту надпись здесь

pepelsbey 24 мая 2008 в 08:21

<div class="field"><div><div><div><input type="text"/></div></div></div></div>

Остальные исходники с картинками по ссылке: http://narod.ru/disk/487112000/field.zip…

nicothin 24 мая 2008 в 10:54

pepelsbey 24 мая 2008 в 11:49

М?

nicothin 24 мая 2008 в 21:30

сорри, не то набрал :(

len 24 мая 2008 в 08:29

Спасибо за вопрос!
Из комментов узнала новый способ "выравнивания" высоты слоев под разными браузерами =)

jazzbird 24 мая 2008 в 17:31

попробуйте отрегулировать с помощью следующего трюка (прописывается в CSS):
top: 12px; -top: 6px;

"top" принимают все нормальные браузеры
а IE принимает последующий "-top"

если голова на плечах есть, догадаетесь, как дальше ;)
я так делал скругленное поле для IE

pi7dets 24 мая 2008 в 17:58

line-height:1em; или line-height:100%; на .input

в зависимости от doctype и описывающего css кода.

НЛО прилетело и опубликовало эту надпись здесь

caIIIa 26 мая 2008 в 09:24

Вариант 1:
Положить в слой с
http://plugins.jquery.com/project/jquery-roundcorners-canvas
Если таких элементов немного, то jquery не страшно. В IE6 гораздо более сносно, чем позиционированные блоки с уголками - всё делает само по себе.

Вариант 2:
Если есть желание, чтобы работало без скриптов - всё-таки, я бы выбрал табличку 3x3, в данном случае это минимальное зло, кто бы не говорил, кода получится меньше, чем трюки с кучкой вложенных слоёв и лишними CSS с хаками.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий