Проблемы с отступами

Юрий_Апостол · №1

Всегда считал, что в Фаерфоксе правильно поддерживаются стили. Особенно волновали отступы (padding, margin), так-как часто приходилось подгонять код. Решил проверить это, в сравненипи с другими браузерами, вышло, что ни один не работает так как нужно.

Вобщем, смотрите сами: http://domanet.org.ua/browsers/padding-test.html
Результат тестов: http://domanet.org.ua/browsers/paddingmargin.png

--
С уважением, Юрий Апостол

ioppp · №2

Юрий_Апостол

Вобщем, смотрите сами

Посмотрел.
Удручающее зрелище.

Unghost · №3

https://bugzilla.mozilla.org/enter_bug.cgi?product=Core

Юрий_Апостол · №4

Опишите кто-то им правильно проблему на английском. Я то отчёт отсылал в картинках, но мало-ли... В тесте разными способами вставлялся блок с внешними отступами (margin: 10px) и максимальных размеров по ширине и высоте (100%) в блок с внутренними отступами (padding: 10px) и размерами 100х100. В третьем тесте внешний блок не отображается, так-как он является элементом TR, а ему указанные свойства не назначаются (они определяются по элементам TD внутри него).

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

--
С уважением, Юрий Апостол

Юрий_Апостол · №5

Так не хотелось, но зарегился на Багзилле, и оставил сообщение.

Lynn · №6

Юрий_Апостол
С таблицами у всех браузеров проблемы, а вот первый пример FF показывает абсолютно верно. Читайте http://www.w3.org/TR/CSS21/box.html#box-dimensions

Юрий_Апостол · №7

А вот и не верно. Я уже вычитал, что фактические размеры не соотверствуют заданным в width/height, но можно смирться и подстраиваться по это. Но!!! В стилях указанно, что отступы со всех сторон одинаковые. А что мы видим на результатах? Получается, что при вычислении браузером размеров учитываются не все отступы, а при отображении пытаются отрисовать те что задано. Таким образом иногда внутренний блок может даже "вылезти" из внешнего.

vladmir · №8

Юрий_Апостол

Опишите кто-то им правильно проблему на английском.

Сначала нужно бы на русском.

Я то отчёт отсылал в картинках, но мало-ли...

Не мало ли, а не будут они ковыряться в такой мешанине.

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

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

Замечу, что код уже проверен валидаторами на соответствие стандартам.

Стандарты не описывают творческие замыслы автора. Откуда валидатор может знать, "что хотел сказать художник"? Может ему именно такой результат и нужен?

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

Откуда, по-вашему, внутренний блок должен брать свою ширину? По-моему, для него 100% равны 100 пикселям. И как браузер должен одновременно нарисовать 2 блока по 100 пикселей один внутри другого и чтобы между ними оставить отступы?

Если бы мне понадобился первый вариант, я бы сделал примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>box test</title>
<style type="text/css">
.out {
width:100px;
height:100px;
background-color: #eee;
border: 1px #000 solid;
}
.in {
margin:20px;
width:58px;
height:58px;
background-color: #ddd;
border: 1px #000 solid;
}
</style>
</head><body>
<div class='out'><div class='in'>#1</div></div>
</body></html>

Остальные не разглядывал.

Rion · №9

эх, хотел ещё посмотреть как всё это в амайе нарисуется но не успел, сайтец прикрыли

Юрий_Апостол · №10

Сайт работает. Временно отключали из-за нагрузки на сервер.

Теперь привожу результаты теста определения ширины горизонтальной линии HR. С задачей корректно справился только ИЕ, как ни странно. А фаерфокс загадочно отреагировал на явное задание ширины в 100%, хотя она такая по умолчанию и есть. В Опере, кроме некорректного определения ширины вылезла ещё проблема со шрифтами (№).

http://domanet.org.ua/browsers/hr_width.html

Al_H · №11

Тогда для Файрфокса нужно указать width: auto;

Lynn · №12

Юрий_Апостол
Ширины всех этементов по умолчанию не 100%, а auto.

vladmir · №13

Юрий_Апостол

А фаерфокс загадочно отреагировал на явное задание ширины в 100%,

От чего браузер должен высчитывать 100% для разделителя?
Вполне логично, что от ширины того элемента, внутри которого разделитель находится.

хотя она такая по умолчанию и есть.

Она есть - 100% от ширины того элемента, внутри которого разделитель находится.

корректно справился только

А где написано, какой должен быть результат? Цитатку можно?

Unghost · №14

==> Разработка

Rion · №15

посмотрел я что нарисовала amaya по ссылке из первого поста. получилось даже правильнее чем required и я точно не буду спорить с разработчиками стандартов как правильно нужно отображать. так что соглашусь с тредстартером что все браузеры весьма и весьма кривые в некторых отношениях.

Snik · №16

Юрий_Апостол

Горизонтальная линия заданная тегом <hr style='width: 100%'> не должна отличаться от <hr>, так-как по умолчания ширина максимальна. Линия также не должна вылазить за блок в который она помещена.

Опачки! Это кто такое сказал? Что она не должна вылазить за блок? В твоей CSS я этого запрета не увидил. Так что прежде, чем делать выводы о том, кто правильно чего строит, следует лучше разобраться со стандартами.
Кстати, уж если ширина HR должна быть 100% по умолчанию, она рассчитывается неправильно и в FF и в IE в первом примере. Другое дело, что _исторически_ сложилось так, что в данном случае _подразумеваетмя_ именно такое отображение. Если же ширина указана явно, то она явно и дожна быть рассчитана. Кстати, для width в CSS по дефолту как раз Auto.

Юрий_Апостол · №17

Эх... Опять столкнулся с проблемой 100% ширины. Нужно растянуть input (текстовый) на ширину ячейки таблицы. У поля ввода, естественно, имеется padding и border, из-за которых оно вылазит за пределы ячейки. Кто-то знает как бороть?

Юрий_Апостол · №18

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

Юрий_Апостол · №19

В ФФ идеальным оказалось такое решение:

Выделить код

Код:

<div style='position: relative;'><input type='text' style='position: absolute; left: 0; right: 0;'></div>

При его вставке в ячейку таблицы, поле ввода полностью заполняет ячейку и никуда не вылазит. Но в ИЕ и Опере поле ввода при таком решении вообще не растягивается.

Полезная информация

Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Re: Проблемы с отступами

Код:

Board footer