Некоторое время назад я пытался решить задачу – каким образом можно выровнять правые края разных по назначению, но одинаковых по длине элементов формы. Подопытными выступали следующие элементы (в сокращенном варианте):
Вроде бы длина одинаковая для всех элементов, но не тут-то было...
В IE поле input получилось примерно на 5px длиннее поля select, а последнее, в свою очередь, – на 2-3px короче, чем поле textarea. FireFox показал себя чуть менее загадочно – поля input и textarea в нем выровнялись, но, так или иначе, поле select отобразилось на 5px короче. Ну а Opera повела себя немногим лучше FF – примерно то же самое, с той лишь разницей, что выровнялись поля select и textarea, а поле input получилось примерно на 7px длиннее...
Попытки уровнять и подогнать все это "вручную" с учетом кроссбраузерности не увенчались успехом. Какие только хаки и ухищрения CSS я не пробовал использовать – все без толку.
Причина всего этого нашлась не сразу, но все-таки нашлась. Ей оказался "правильный" DOCTYPE:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
После изучения некоторых веб-сайтов (microsoft.com/rus/, mail.ru, rambler.ru – список можно продолжать долго), на которых все поля форм отображаются идеально ровно во всех браузерах, я заметил, что их создатели не указывают вторую строку в ОТД, т.е. использует сокращенный DOCTYPE:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Стоило только мне убрать эту вторую строку, и (о чудо!) – все поля формы идеально выровнялись во всех браузерах! К сожалению, нигде в сети я до сих пор так и не могу найти этому объяснение. А очень хотелось бы! Причины очевидны – W3C рекомендует к использованию именно полную версию ОТД. Да и весьма известный автор весьма популярной статьи [Только зарегистрированные пользователи могут видеть ссылки. ] говорит о том же.
И как же все-таки быть? Следовать стандартам, используя полную версию ОТД, и лицезреть корявые формы? Или наплевать на стандарты, используя неполный вариант ОТД, и наслаждаться кроссбраузерно-ровными полями? Еще, кстати, немного интересен тот факт, что документы с "усеченным" ОТД не смотря ни на что почему-то прекрасно проходят валидацию (!).
Originally posted by _Mr.D._@Jan 7 2007, 11:05
[b]PS: Честно пытался найти форум на сайте w3c и спросить по этому поводу.Не нашел. Боже,какая там помойка.
PPS: Неплохая на мой взгляд программа от Allaire- Home Site ставит однострочный doctype по умолчанию.
однострочный, не значит сокращенный!
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HomSite уже давно Macromedia принадлежит, которая уже давно Adobe принадлежит =)) это ж какую версию Хомсайта вы нашли-то?
URI обязателен, иначе от него толка браузеру, как лысому расческа.
ставьте доктайп, как я я указал выше или стрикт, выравнивайте формы через <label>, используйте валидные хаки, не забывайте, что некоторые параметры форм необходимо указать в самом элементе, а потом подогнать через css и будет вам счастье.
Originally posted by _Mr.D._@Jan 7 2007, 13:05 Однострочный Doctype также использует уважаемая компания Apple
[Только зарегистрированные пользователи могут видеть ссылки. ]
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Совершенно верно. Я писал, что список можно продолжать долго...
Originally posted by _Mr.D._@Jan 7 2007, 13:05 А вообще-то если честно,почитав материалы с сайта w3c я немного в шоке - все эти URl , но не URL попахивают болезнью.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Напрасно Вы так.
Там далеко не глупые люди сидят. И мы им многим обязаны.
<div class='quotetop'>Цитата</div>
Примечание. Большинство читателей, наверное, знакомы с термином "URL" и не знакомы с термином "URI". URL образуют подраздел более общей схемы именования - URI.[/b]
Originally posted by _Mr.D._@Jan 7 2007, 13:05 PS: Честно пытался найти форум на сайте w3c и спросить по этому поводу.Не нашел. Боже,какая там помойка.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Тут можно процитировать [Только зарегистрированные пользователи могут видеть ссылки. ]:
<div class='quotetop'>Цитата</div>
W3.org – это не сайт со статьями как A List Apart, WebReference или Webmonkey. Он не создан в помощь web-дизайнерам, разработчикам и авторам сайтов, и он не занимается распространением новейшей информации и полезных советов. Это не его задача.
Да, иногда W3C публикует серии учебных статей, хотя большинство web-разработчиков об этом даже и не знает. Но в основном, сайт W3C содержит собрание предложений, проектов и Рекомендаций, которые написаны инженерами для инженеров. И когда я говорю об инженерах, я не имею в виду простых специалистов в области web-разработок, таких спецов, как вы и я. Я имею в виду инженеров, по сравнению с которыми мы выглядим полными болванами.[/b]
Originally posted by Zigzag@Jan 7 2007, 14:21 URI обязателен, иначе от него толка браузеру, как лысому расческа.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Сложно не согласиться. Или как козе – баян. Или как зайцу – звонок.
Originally posted by Zigzag@Jan 7 2007, 14:21 ставьте доктайп, как я я указал выше или стрикт
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Никакой проблемы доктайп XHTML в данном случае не решает.
Он ведет себя точно так же – правые границы одинаковых по длине полей формы неровные. Более того, в отличие от доктайпа HTML, если даже (! исключительно в качестве эксперимента) использовать "усеченный" вариант доктайпа XHTML – поля не выравниваются.
Originally posted by Zigzag@Jan 7 2007, 14:21 выравнивайте формы через <label>
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Оп! Секундочку! Цитирую:
"Элемент <label> используется для присоединения информации к элементу управления, у которого нет встроенного лэйбла. К элементам управления, не имеющим изначально ассоциированных с ними лэйблов, относятся текстовые поля, переключатели, radio-переключатели и меню. Если элемент <label> получает фокус, он передает его ассоциированному элементу управления."
На этом функция этого элемента заканчивается. И, поверьте, я его стараюсь использовать везде, где только можно (примером тому – [Только зарегистрированные пользователи могут видеть ссылки. ]). Но каким образом он может использоваться для ВЫРАВНИВАНИЯ чего-либо – это для меня загадка... Если по существу и без шуток – никаким...
Originally posted by Zigzag@Jan 7 2007, 14:21 используйте валидные хаки
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Простите, но я по-моему уже говорил, что "Попытки уровнять и подогнать все это "вручную" с учетом кроссбраузерности не увенчались успехом. Какие только хаки и ухищрения CSS я не пробовал использовать – все без толку." Если бы Вы смогли предложить какие-нибудь хаки, которых я не знаю или не догадался использовать – степень Вашего профессионализма для меня не имела бы границ. Серьезно!
Originally posted by Zigzag@Jan 7 2007, 14:21 не забывайте, что некоторые параметры форм необходимо указать в самом элементе, а потом подогнать через css и будет вам счастье.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Простите, это какие же параметры? Name, value, maxlength, disabled, tabindex и accesskey? (есть там еще несколько – перечислять лень) Помилуйте, для решения описываемой мной проблемы они совершенно несущественны. А счастья, к сожалению, пока не предвидится... :ninja:
Originally posted by makeitso@Jan 7 2007, 20:54 Включается Quirks Mode во всех браузерах.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
Вот! Именно об этом я только сегодня узнал из одной статьи.
Но как же быть по существу?