<INPUT> при объявлении DOCTYPE

jonishko

Почему при объявлении DOCTYPE ширина input оказывается больше заданной на 4 пикселя. А что самое обидное, так это не везде, в опере 8.5 у инпута нормальная ширина. А в результате не получается в опере, ИЕ и мозилле одинаково выровнять по ширине с select-ом.
Как сделать, а?

Инета нету даже,чтобы поискать как с этим борятся. Подскажите плз кто знает

ps в zip пример, о чём я...

Bibi

ну хз, объяви еще один класс, типа exam_input_text, у которого ширина будет на 4px меньше, заодно и padding:0 указать можно. тогда во всех трех аккуратненько смотрится.
а оперу лучше 9ю поставить.
как вариант - еще поиграться со шрифтами

jonishko

Да у меня-то девятая стоит, и тогда действительно можно задать ещё один класс, и пусть input будет везде на 4 пкс больше. Результат будет. Но сейчас надо подогнать и под 8.5 оперу, это в условии есть

Пробовал по разному, и padding 0,и margin 0, шрифтами играл. Вставлял элементы в разные дивы, задавал дивам фиксированные размеры, а элементам по 100%, всё равно input растягивается на 4 пикселя больше. Проблема висит, можно конечно убрать доктип нафиг и всё будет ок

Но в конкретно этой задаче не разрешили его убирать...

Мне на ум приходит тока определять скриптом тип браузера и использовать разные значения ...

jonishko

тогда во всех трех аккуратненько смотрится.

За исключением 8.5 - ой оперы ...

lesha77

http://www.artlebedev.ru/tools/technogrette/html/doctype2/

ndreij

Вообше лучше объявлять с самого начала что-то типа:



/* zeroing both margin and padding for all elements */

* {

  margin:0;

  padding:0;

}

Т.е. дефолтные настройки сразу переопределять

jonishko

В проекте это всё объявлено, в моём примере этого нет так как не нужно, проблема не в этом. Как я только не пробовал задавать отступы, одинакового отображения в названных браузерах достичь не удалось, как в случае например с checkbox - ом . Когда тоже отступы в разных браузерах разные, но это лечится если input с checkbox задать padding:4px, а блоку содержащему input с text такой же отступ слева.
Вот, посмотрите в опере, мозилле и ие. Так они выровнены по левому краю, удалите стили, увидите что в ие и мозилле будут отступы у checkbox,а в опере отступа не будет. Как выровнять select и input кроме как удалением доктипа хз...

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd'>

<html>



<style>

.text{padding-left:4px;}

.checkbox{padding:4px;}

</style>



<body>

	<div class='text'><input type='text' /></div>

	<div><input class='checkbox'  type='checkbox' /></div>

</body>

</html>

jonishko

Спасибо за ссылку, но как при помощи той инфы решить проблему я не догнал. Есть там немножко про ширину блоков. Но у меня объявлен strict, а тогда ширина блоков во всех современных браузерах должна включать в себя ширину всех отступов и рамки. В старых браузерах могут быть расхождения, но опера уже с версии 7.5 понимает strict. Да и вообще причём тут блоки, если эти элементы у меня лежат в одном, можно и его убрать нафиг...
Может я чего не так понял и в статье что-то есть по решению этой проблемы?

Bibi

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

jonishko

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

Не понял, в какой статье?

По ссылке в статье просто объясняется как ведут себя блочные элементы, картинки и шрифты в разных режимах, а как это относится к input и select я не понял

Есть ещё там сслыка на полезную статью, нужно или не нужно использовать доктайп.
Но мне по-любому doctype нельзя убирать. Так что вопрос только в том, как при объявленном strict сделать input и select по ширине кроссбраузерными.

jonishko

Я вообще не могу понять как так получилось, что сделали такой 'строгий' стандарт, что без него корректно отображается в разных браузерах, а с ним такое... Да ещё и лечится ли это хз...

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