Некоторое время назад я пытался решить задачу – каким образом можно выровнять правые края разных по назначению, но одинаковых по длине элементов формы. Подопытными выступали следующие элементы (в сокращенном варианте):
Вроде бы длина одинаковая для всех элементов, но не тут-то было... [Only registered and activated users can see links. Click Here To Register...]Код:<input type="text" style="width: 300px;">
<select style="width: 300px;">...</select>
<textarea style="width: 300px; padding: 0px; margin: 0px;">...</textarea>
В IE поле input получилось примерно на 5px длиннее поля select, а последнее, в свою очередь, – на 2-3px короче, чем поле textarea. FireFox показал себя чуть менее загадочно – поля input и textarea в нем выровнялись, но, так или иначе, поле select отобразилось на 5px короче. Ну а Opera повела себя немногим лучше FF – примерно то же самое, с той лишь разницей, что выровнялись поля select и textarea, а поле input получилось примерно на 7px длиннее... [Only registered and activated users can see links. Click Here To Register...]
Попытки уровнять и подогнать все это "вручную" с учетом кроссбраузерности не увенчались успехом. Какие только хаки и ухищрения CSS я не пробовал использовать – все без толку.
Причина всего этого нашлась не сразу, но все-таки нашлась. Ей оказался "правильный" DOCTYPE:
После изучения некоторых веб-сайтов (microsoft.com/rus/, mail.ru, rambler.ru – список можно продолжать долго), на которых все поля форм отображаются идеально ровно во всех браузерах, я заметил, что их создатели не указывают вторую строку в ОТД, т.е. использует сокращенный DOCTYPE:Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Стоило только мне убрать эту вторую строку, и (о чудо!) – все поля формы идеально выровнялись во всех браузерах! К сожалению, нигде в сети я до сих пор так и не могу найти этому объяснение. А очень хотелось бы! Причины очевидны – W3C рекомендует к использованию именно полную версию ОТД. Да и весьма известный автор весьма популярной статьи [Only registered and activated users can see links. Click Here To Register...] говорит о том же.Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
И как же все-таки быть? Следовать стандартам, используя полную версию ОТД, и лицезреть корявые формы? Или наплевать на стандарты, используя неполный вариант ОТД, и наслаждаться кроссбраузерно-ровными полями? Еще, кстати, немного интересен тот факт, что документы с "усеченным" ОТД не смотря ни на что почему-то прекрасно проходят валидацию (!). [Only registered and activated users can see links. Click Here To Register...]
Есть мнения? :hi:
