Freakmeister

Фак мой мозг... проблема была не в блоках с абсолютной позицией, а в фоне - высота блоков .year отличалась на 2 пикселя в разных браузерах. Так и не понял почему, проблему решил задав им точную высоту.

Есть страничка, на которой все элементы имеют абсолютную позицию и их положение отталкивается от bottom: http://red-squadron.ru/halloffame Позиция берется именно от bottom, чтобы страницу можно было дополнять вверх и блоки при этом никуда не ехали. В чем косяк: В FireFox и IE верхние блоки расположены так: http://joxi.ru/5U_gUv3JTJCYEMqnYbA А в Chrome, Safari и Opera они чуть сдвинуты вверх: http://joxi.ru/LlDgUv3JTJC0EBskLr4 А если смотреть блоки ниже, то чем они ниже расположены, тем меньше отклонение. Такое чувство, что в разных браузерах размер пикселя разный... Прошу пояснить в чем тут соль и как это можно исправить.

Нет, нельзя. Стиль процедурный. По сабжу: значит никто не знает как пофиксить этот баг с марджином/падингом в IE6-7? Из-за этого от поддержки IE6-7 в этой вёрстке мне пришлось отказаться.

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

Уже какой месяц бьюсь, пытаясь изобрести идеальную резину, но так ничего и не вышло, даже приближённого к идеальному. Предлагаю объединить усилия. Давайте уже соберёмся и перевернём нафиг привычные представления о вёрстке! Сверстаем шедевр, которым потом будут пользоваться не одно поколение программистов. Собственно, озвучиваю требования по порядку: 1. 2 фиксированных сайдбара и резиновый центр. Фиксированные по высоте футер и хидер. 2. Обтекание больших картинок центральным блоком, то есть макет должен уметь "разъезжаться" шире окна браузера. 3. Футер прижат к низу страницы, а при высоком контенте страница тянется вниз. 4. Возможность сделать header и footer прозрачными, и чтобы под ними не было фона колонок (есть пара идей как это можно сделать). 5. Все 3 колонки одинаковой высоты, и им можно задать background-image (их можно попробовать эмулировать псевдо-колонками, например). 6. Без таблиц, ибо с ними в IE глюков будет ещё больше, чем с блоками. 7. Без JS. 8. Полная кроссбраузерность, так что тестировать лучше сразу на IE6 и 7. 9. На количество элементов абсолютно пофиг, ибо с такими запросами уже не до этого. Я начну по порядку. Сегодня с самого утра возился со 2 пунктом - обтекание картинки. Результат сейчас выглядит так: http://maestro-magnifico.ru/testdir/2012-03-20/test2.html Столкнулся с багом в IE 6 и 7, который не могу пофиксить - margin-right у #center-col (который нужен для компенсации #right-col), отсчитывается от края окна браузера, а не от края содержимого. Если контент шире окна браузера, то margin-right толкает текст в #center-col. Кстати, из-за этого же поведения IE6 и 7 я прижал левую и правую колонки к бокам через position: absolute. float: right точно так же прижимает блок к правому краю окна браузера, а не к правому краю контента. В общем, жду вашей помощи с решением этого бага, чтобы можно было двигаться дальше. З.Ы. Кому интересно поработать над этим проектом более тесно, мой скайп maestro_magnifico. Также есть во владении сервер Team Speak, где можно собраться для обсуждения.

Лол! Не, это не вариант. Мне нужна высота именно блока, чтобы обнести его бордером. Значит только джава-скриптом?

Столкнулся с такой проблемой как блоки внутри таблицы. Как сделать блок #second высотой в 100% от родителя? http://jsfiddle.net/rDfgW/

Омг, какой у вас тут живой форум. Надо заходить почаще. Switch74, твой вариант не совсем то что нужно. Я хотел резиновую вёрстку по вертикали, чтобы контейнер обтекал контент. Как например тут: http://silverflame.at.tut.by/sticky1.html Или тут: http://psywalker.ru/Forum/Footer_bottom/main.html Два вида резиновой вёрстки и оба не кроссбраузерны - один не работает с Оперой, второй с IE7. Вот это то что нужно! Я правда сейчас не в состоянии разбираться с этим, но похоже, что вот он фикс моей мечты: body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }Добавил в пример Nanto - в Опере всё щщщщикарно!

Опера почему-то неправильно обрабатывает min-height и событие onresize срабатывает только при горизонтальном ресайте, но не при вертикальном. Попробуйте задать это свойство и потянуть окно не за угол браузера, а за низ, и увидите что высота контента не меняется. А если потянуть его хотя бы на пиксель в сторону, контент примет нужную высоту. Та же лабуда была замечена и в IE8 при добавлении футера. Я не могу это сделать, потому как у блока #content прописано overflow: hidden, и если высоту задать в 100%, то он будет "кушать" контент при ресайзе. Я хотел колонки на всю высоту, футер к полу и ещё по задумке кнопки в навигации должны будут переключать контент "слайдером" влево-вправо, примерно как это реализовано здесь http://pxtoem.com/ Для этого мне и нужен блок #content с overflow: hidden.

А как ты ещё предлагаешь задать высоту блоку в 100% с overflow: hidden, умник?

Это эмуляция высоты колонок в 100% окна. Короче я пол-дня гуглил и пришёл к выводу, что это нельзя никак починить без JS. Опера имеет целый набор глюков с атрибутом min-height в процентах и вертикальным ресазом (тогда как с горизонтальным ресайзом всё нормально): http://archivist.incutio.com/viewlist/css-discuss/109460 К тому же, если в блок с min-height 100% прописать overflow: hidden, как сделано у меня, то этот блок в опере вообще не будет ресайзиться. Так что, остаётся только выгуглить как определить оперу средствами html, чтобы подключить в неё скрипт с ресайзом блока по setinterval.

#content это блок с overflow:hidden, height: auto даёт обтекание контента, а min-height высоту блока. Если поставить height: 100%, то #content будет "кушать" контент при уменьшении окна, без отображения вертикальной прокрутки в браузере.

Сверстал такую вот штуку: http://maestro-magnifico.ru/test/ Почему сверстал именно так, даже на спрашивайте... По задумке блок #middle должен будет ездить влево-вправо за границу блока #content, у которого overflow: hidden. Не суть! Во всех браузерах эта вёрстка отображается замечательно, кроме оперы, где при ресайзе окна, высота контента не меняется. Отчего так - не понятно, надеюсь на совет матёрых верстальщиков. З.Ы. Я в курсе проблемы наезжания футера на контент, и знаю как её решить, просто до этого пока ещё дело не дошло.

Выяснил такую вещь, что при анимации все элементы становятся display: block. Отсюда и подлагивания неблоковых элементов. Вот только не понимаю почему когда я ставлю display: inline-block; центральному диву, то он уползает вниз? Выставление display: inline-block; боковым колонкам тоже не помогает, всё выглядит как показано тут: http://savepic.net/1291355.png /add Добавил внутрь центрального блока ещё один див, обвёл зелёным бордером для наглядности, и прописал ему display: inline-block;. Есть прогресс, блоки встали на своё место, но при анимации зелёный див всё-равно "приседает".

Мне нужно, чтобы центральный див растягивался по содержимому, если в него засунуть картинку любых размеров. А если сейчас прописать overflow: hidden; и сузить страницу, то часть картинки спрячется. Я вот об этом.) Так что, overflow: hidden; это вообще не вариант.

Нет, overflow: hidden; я использовать не хочу. В центральном блоке не случайно стоит картинка, она нужна чтобы показать, что этот блок обтекает своё содержимое за счёт того, что в родительском диве #wrapper прописано display: inline-block; Если я использую overflow: hidden; то картинка будет обрезаться.

Есть резиновая дивная вёрстка с анимацией скрытия боковых блоков: http://maestro-magnifico.ru/ Используется jQueryUI. Проблема в том, что при анимации боковых блоков, текст в центральном блоке не разъезжается плавно. CSS центрального блока: #center_column { margin: 0px 190px; /* ширина боковых блоков + отступы */ border: 2px solid red; /* для наглядности */ } Если сюда добавить ещё: display: inline-block; то, анимация текста становится плавной, но сам центральный блок опускается под высоту боковых блоков: http://savepic.net/1291355.png Как это исправить? =\

Иееее =) Победил обе проблемы следующим образом: http://habrahabr.ru/qa/1379/#answer_5750 display: inline-block; добавил в #wrapper. При этом ширину этому блоку задавать нельзя. Поэтому, если нужны отступы с боков, то их можно сделать так: margin: 0 5%; Только теперь текст в центральном блоке подглючивает при анимации.

Проблема в том, что я хочу вживить в эту вёрстку увесистый движок форума, а уж все ли страницы в нём резиновые и влезут ли они все по ширине - не могу знать заранее. Тем более, пользователи могут вставлять туда какие-то картинки, которые будут ломать вёрстку. Поэтому, надо научить центральный блок обтекать содержание. Пока единственный способ, которым удалось этого добиться - засунуть этот див в таблицу из одной ячейки. Центральный блок при этом растягивается по таблице, но возникает другая проблема - он "залезает" на правую панель #right_column, у которой прописано float: right. Тоесть, в таком случае, придётся ещё и боковые колонки учить "обтекать". Поэтому я и написал сюда, в надежде, что есть способ проще. Вообще, мб есть способ заставить дивы выравниваться не по центру видимой области в браузере, а по реальному содержанию, учитывая скролл? Это реально облегчило бы мне жизнь. Вот, к примеру, посмотрите на зелёный див на заднем фоне - #wrapper. Если сузить страницу, а потом увести горизонтальный скролл вправо, то вы увидите рисунок бэкраунда body. Хотя, мне не нужно, чтобы это происходило.)

Пытаюсь сделать резиновую вёрстку дивами такого типа: Выглядит это сейчас так: http://maestro-magnifico.ru/ (#center_column обвёл красным бордером для наглядности) Проблема в том, что если сузить страницу, то любой контент с фиксированной шириной - картинки или текст с nowrap, которые находятся внутри резинового блока #center_column, выезжают за его пределы. Как это можно предотвратить?