Некорректное отображение форм (инпутов, вложенного списка)

@Andeangl · Регистрация: 18.07.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток!

Возникла проблема: после авторизации на сайте, летит разметка форм (откуда-то появляются margin'ы левые (в фаербаге отображается margin в блоковой модели, но никто из css/html его не задаёт)).

Конкретно: летит форма обратной связи (список в ней, находящийся внутри тега form), форма поиска в верхней части экрана (input в ней, меняется ширина блока (вообще не представляю, за счёт чего)), поле отправки сообщения в чат, и форма с настройками.

Везде добавляются margin'ы, меняется ширина (за счёт чего, не представляю - в css для input'a поля поиска задано 156 пикселей, в блоковой модели оказывается 122. При этом фаербаг стиль где 156 не зачёркивает (т.е. он основной), и никакими стилями больше ширина не меняется).

Данные косяки возникают исключительно после авторизации, до того всё работает отлично.

Буду благодарен за помощь

@Andeangl · 05.04.2015, 17:42 **[ТС]**

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

Залатать могу самостоятельно, это не проблема - не хочется копить непонятные баги на сайте.

@Xteda · 05.04.2015, 17:50

Уберите у form margin-bottom.

@Andeangl · 05.04.2015, 17:52 **[ТС]**

Мне нужно не починить то что полетело, а найти причину этого полёта. В CSS не было задано этих margin'ов, и я не знаю, откуда они взялись. Меня беспокоит именно это - убрать их не сложно, но если не найти источник проблем, они обязательно вылезут в будущем, причём в ещё более изощрённом виде.

@Xteda · 05.04.2015, 18:01

Проблема в том, что вы не делаете резет стилей, а потом ловите такие баги. Это стиль самого браузера. http://screencast.com/t/UEoZU8kj8. В общем делайте резет и все будет хорошо.

@Andeangl · 05.04.2015, 18:06 **[ТС]**

Тоже нет - это не стили браузера, там значения другие, слишком большие. Например, у формы поиска:

<form name="search" action="search.php" method="get">

В блоковой модели отображается margin-bottom, на 16 пикселей. При этом кто это задаёт, не понятно (точно не браузер, отступа в 16 пикселей даже у <h1> нет.

Единственное, чем это лечится, это если в код html добавить запись ' style="margin-bottom: 0;" '.

@Xteda · 05.04.2015, 18:11

Вы видели скриншот. Там написано user agent stylesheet.

Добавлено через 33 секунды
1 em = 16 пикселей.

Добавлено через 47 секунд
Я такое видел много раз, не надо со мной спорить на эту тему.

@Andeangl · 05.04.2015, 18:11 **[ТС]**

Вот скрин, margin-bottom 16px, у агента всего 1px

@Xteda · 05.04.2015, 18:12

Читаем

Добавлено через 34 секунды
Вы видете, что там не пиксели, а em?

@Andeangl · 05.04.2015, 18:20 **[ТС]**

Понял, сейчас буду разбираться со сбросом. А что с шириной input'a у поиска? Там на 33px меньше, чем должно быть, кто это делает?

Добавлено через 1 минуту
И ещё такой вопрос: почему всё работало нормально пока не прошла авторизация?

@Xteda · 05.04.2015, 18:23

Появляется box-sizing:border-box

Добавлено через 2 минуты
Вот тут не понятно, почему. Смотрите свой php. Одно ясно точно, сделаете резет и вылечите это.

@Andeangl · 28.05.2015, 10:09 **[ТС]**

Прошу модератора удалить ссылку в основном сообщении!

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@Andeangl 6 / 6 / 2 Регистрация: 18.07.2013 Сообщений: 178

	Некорректное отображение форм (инпутов, вложенного списка) 05.04.2015, 17:35. Показов 1785. Ответов 11 Метки нет (Все метки) Доброго времени суток! Возникла проблема: после авторизации на сайте, летит разметка форм (откуда-то появляются margin'ы левые (в фаербаге отображается margin в блоковой модели, но никто из css/html его не задаёт)). Конкретно: летит форма обратной связи (список в ней, находящийся внутри тега form), форма поиска в верхней части экрана (input в ней, меняется ширина блока (вообще не представляю, за счёт чего)), поле отправки сообщения в чат, и форма с настройками. Везде добавляются margin'ы, меняется ширина (за счёт чего, не представляю - в css для input'a поля поиска задано 156 пикселей, в блоковой модели оказывается 122. При этом фаербаг стиль где 156 не зачёркивает (т.е. он основной), и никакими стилями больше ширина не меняется). Данные косяки возникают исключительно после авторизации, до того всё работает отлично. Буду благодарен за помощь Миниатюры 0

@Andeangl 6 / 6 / 2 Регистрация: 18.07.2013 Сообщений: 178
	05.04.2015, 17:42 [ТС]
	Проблема не в том, чтобы сделать заплатки и починить эти баги, а в том, чтобы найти причину - я не представляю, что это делает. Залатать могу самостоятельно, это не проблема - не хочется копить непонятные баги на сайте. 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	05.04.2015, 17:50
	Уберите у form margin-bottom. 0

@Andeangl 6 / 6 / 2 Регистрация: 18.07.2013 Сообщений: 178
	05.04.2015, 17:52 [ТС]
	Мне нужно не починить то что полетело, а найти причину этого полёта. В CSS не было задано этих margin'ов, и я не знаю, откуда они взялись. Меня беспокоит именно это - убрать их не сложно, но если не найти источник проблем, они обязательно вылезут в будущем, причём в ещё более изощрённом виде. 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	05.04.2015, 18:01
	Проблема в том, что вы не делаете резет стилей, а потом ловите такие баги. Это стиль самого браузера. http://screencast.com/t/UEoZU8kj8. В общем делайте резет и все будет хорошо. 0

@Andeangl 6 / 6 / 2 Регистрация: 18.07.2013 Сообщений: 178
	05.04.2015, 18:06 [ТС]
	Тоже нет - это не стили браузера, там значения другие, слишком большие. Например, у формы поиска: <form name="search" action="search.php" method="get"> В блоковой модели отображается margin-bottom, на 16 пикселей. При этом кто это задаёт, не понятно (точно не браузер, отступа в 16 пикселей даже у <h1> нет. Единственное, чем это лечится, это если в код html добавить запись ' style="margin-bottom: 0;" '. 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	05.04.2015, 18:11
	Вы видели скриншот. Там написано user agent stylesheet. Добавлено через 33 секунды 1 em = 16 пикселей. Добавлено через 47 секунд Я такое видел много раз, не надо со мной спорить на эту тему. 0

@Andeangl 6 / 6 / 2 Регистрация: 18.07.2013 Сообщений: 178
	05.04.2015, 18:11 [ТС]
	Вот скрин, margin-bottom 16px, у агента всего 1px Миниатюры 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	05.04.2015, 18:12
	Читаем Добавлено через 34 секунды Вы видете, что там не пиксели, а em? 0

@Andeangl 6 / 6 / 2 Регистрация: 18.07.2013 Сообщений: 178
	05.04.2015, 18:20 [ТС]
	Понял, сейчас буду разбираться со сбросом. А что с шириной input'a у поиска? Там на 33px меньше, чем должно быть, кто это делает? Добавлено через 1 минуту И ещё такой вопрос: почему всё работало нормально пока не прошла авторизация? 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	05.04.2015, 18:23
	Сообщение было отмечено Andeangl как решение Решение Появляется box-sizing:border-box Добавлено через 2 минуты Вот тут не понятно, почему. Смотрите свой php. Одно ясно точно, сделаете резет и вылечите это. 1

@Andeangl 6 / 6 / 2 Регистрация: 18.07.2013 Сообщений: 178
	28.05.2015, 10:09 [ТС]
	Прошу модератора удалить ссылку в основном сообщении! 0

Некорректное отображение форм (инпутов, вложенного списка)

Решение