Горизонтальная прокрутка и PRE

[Malamut]

Меня уже не один год мучает проблема, наглядный пример которой можно посмотреть на этой вот странице:

http://help.ubuntu.ru/terms/стилистика_статей

Проблема вот в чём: несмотря на то, что стоит универсальный селектор

* { margin: 0 }

у основного контейнера (ячейка таблицы) установлено overflow: hidden, а у тега pre overflow: auto, эта редиска всё равно растягивает страницу!

Наблюдается во всех версиях FF, IE, Chrome и Opera 10.5, причём в Opera 10.10 и младше - всё нормально.

Все мои ломания мозгов об спецификации CSS так и не дали ответ на вопрос почему, и главное, как это заставить работать.

Поправьте меня если я не прав. Нулевые правый и левый марджины у всех блочных элементов означают 100% ширину, 100% у body - это полное окно браузера и ни пиксела больше.

Соответственно указание overflow: hidden у внешнего контейнера как минимум должно означать, что ни при каких условиях страница не будет растянута. И даже шут с ним, комбинация всё тех же width: 100% и overflow: auto должна обеспечивать прокрутку в случае если содержимое контейнера шире самого контейнера.

Итого на одной страничке можно наблюдать два бага реализации свойства overflow.

Собственно задача: заставить тег pre при выходе его содержимого за максимальный размер показывать полосы прокрутки. По высоте отлично работает ограничение max-height и overflow-y: auto. По длине margin: 0 и overflow-x: auto работать отказываются.

 

[tigra60]

Ну, дык, блочную модель еще никто (кроме дядюшки Билли) не отменял.
Вы установили для body горизонтальные отступы по по 20рх с каждой стороны. Вот и имеете:
таблица 100% да плюс 40рх = горизонтальная полоса прокрутки.
Удачи!

 

[Malamut]

Ну, дык, блочную модель еще никто (кроме дядюшки Билли) не отменял.
Вы установили для body горизонтальные отступы по по 20рх с каждой стороны. Вот и имеете:
таблица 100% да плюс 40рх = горизонтальная полоса прокрутки.
Удачи!

Дык это, 100% всю жизнь было относительно родительского контейнера. А отступы для body - вполне себе нормальная вещь. Так что тут всё нормально.

 

[Creator]

у основного контейнера (ячейка таблицы) установлено overflow: hidden, а у тега pre overflow: auto, эта редиска всё равно растягивает страницу!

Да и правда, pre ведет себя неадекватно. При относительных величинах ширины, все равно масштабируется по строке, несмотря на overflow.

В общем, у меня не получилось исправить ситуацию, кроме как прописать абсолютного значения ширины для div.dokuwiki pre. Ясное дело, что с резиновой версткой придется использовать JS и с помощью него подстраиваться под размеры экрана пользователя. Других вариантов, пока не вижу.

P.S. Добро пожаловать, модератору убунту.ру. Я ваш постоянный читатель)

 

[Malamut]

В общем, у меня не получилось исправить ситуацию, кроме как прописать абсолютного значения ширины для div.dokuwiki pre. Ясное дело, что с резиновой версткой придется использовать JS и с помощью него подстраиваться под размеры экрана пользователя. Других вариантов, пока не вижу.

На самом деле при доскональном изучении проблемы (я не поленился задать вопрос на куче ресурсов :tongue: ) решение таки нашлось. Да и причина неадекватного поведения - тоже. В общем если обратиться к http://www.w3.org/TR/CSS2/tables.html, то можно узнать, что у таблиц по умолчанию стоит свойство table-layout: auto, которое означает, что ширина таблицы будет подстраиваться под содержимое. Поскольку основной контейнер у нас - таблица, то несмотря на явное указание абсолютно всех значений ширины всё равно браузеры растягивают таблицу, чтобы вместить её содержимое. Это немного не вписывается в блочную модель, но недаром есть специальное значение (даже значения!) свойства display для таблиц.

Ну и да - очевидный вариант решения - поставить table-layout: fixed