CSS inline-block firefox 2

Короче чистый фетиш.
Нужно сверстать сайт что бы в он корректно отображался в FireFox 2. Для расстановки тумб используется inline-block.
Для тумбы используется css:

Код: [развернуть]

.thumbs li { width:302px; height:248px; margin:1px; position:relative;display:-moz-inline-stack; display:inline-block; *display:inline; zoom: 1; *margin:2px; }

вывод на морду идет с дополнительным контейнером div:

Код: [развернуть]

<li><div> <a href="#" target="_blank" title="#"><img src="#" alt="#" /> <h2>Text<span>Text<em>Text</em></span></h2></a> </div></li>

короче ничего не помогает. в FireFox 2 все тумбы оказываются в верхнем левом углу наложенные друг на друга.

Может есть шаманы?

так спроси верстуна зачем он так сделал то. интересно послушать к чему тут position:relative; (которое выдергивает блок из обычного(static) потока и актуально только для случая когда блок надо подвигать относительно себя же) и zoom: 1; (которое задает hasLayout блоку. т.е. заставляет элемент принять блоковость(вернее кривую эмуляцию блоковости)) в IE.

почему не сделать просто:
.thumbs li {width:302px; height:248px; margin:1px; float:left;}
.thumbs ul {overflow:hidden; zoom: 1;}

будет работать везде

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

тогда плюсом
ul {margin:0 auto; widht:80%;}
ну или какая там должна быть ширина блока с тумбами. если задашь в пикселях то будет фиксированный. если в процентах - то относительно body (или того блока-родителя в котором ul лежит)

Задание ширины в процентах не даст того же эффекта как inline-block, так как при разных разрешениях тумбы все равно будут стараться или прижаться к левому краю или будет слишком много свободного места, которое при верстке inline-block займет тумба. Конечно можно извратиться и задать конкретную ширину под разные разрешения с помощью ява, но это имхо совсем изврат.

Интересует именно верстка с помощью inline-block. Мой пример работает во всех браузерах кроме FireFox 2.
Кряки под FireFox 2 типа
#hackme, x:-moz-any-link {styles for Firefox 2.0 here}
почему то распространяются на все последующие версии и тоже не подходят для решения данной проблемы.

То как я сверстал должно работать (по всем мануалам посвященным этой проблеме), но не работает. И я не могу понять где ошибка.

САМЫЧ писал:

Задание ширины в процентах не даст того же эффекта как inline-block, так как при разных разрешениях тумбы все равно будут стараться или прижаться к левому краю или будет слишком много свободного места, которое при верстке inline-block займет тумба. Конечно можно извратиться и задать конкретную ширину под разные разрешения с помощью ява, но это имхо совсем изврат.

задай ширину тумбы в процентах
ul {width:100%}
li {width:25%;}
li div {тут уже все отступы маргины итд}

САМЫЧ писал:

То как я сверстал должно работать (по всем мануалам посвященным этой проблеме), но не работает. И я не могу понять где ошибка.

а кто тебе втемяшил что inline-block вообще надо юзать? его ж никто не юзает. сделай проще как-то. сидж верстают проще люди.
где ошибка - ты не найдешь по мануалам. потому что хак - не реализует заданное свойство(по спецификации). он просто путем ошибки (сначала css-разбора, а потом html-рендеринга) "совпадает" с тем что реализует другое свойство. вот и все. в простом виде (чистый лист и блок) это работает. в чуть более сложной ситуации (когда в одном месте напружено нагружено много блоков много потоков много пересечений и взаимо_влияний) - это уже не работает. любого хака кстати касается это. после пары тройки вот такой ебли - нормальные люди таблицу въебут и мозг не ебут. ни себе ни тому кто будет после них это дерьмо разгребать. ну данность это

FXIX писал:

задай ширину тумбы в процентах ul {width:100%} li {width:25%;} li div {тут уже все отступы маргины итд}

ну нахрена мне 4 тумбы? мне нужно 1, 2, 5, 8 тумб в ряд, в зависимости от ширины экрана, процентами этого не добиться.

Мне не нужно проще. Мне нужно, что бы тумбы были на всю ширину экрана с равными отступами с лева и права.

тогда варианта два

1.
li {display:inline;}
li * {display:inline;}
Делаешь LI строковым. Все что внутри LI - тоже делаешь строковым. чтобы валидатор не ругался. Ширину\высоту задаешь паддингами(ибо у строковых маргина\ширины\высоты нет). Чтобы внутри ничего не сливалось(ссылки хуилки заголовки итд) - делаешь через <br />. Т.е. будет самый простой вариант по типу: в блоке внутри набор ссылок(или картинок) выровненных по-середине тупо text-align:center;

2. вариант с зафлоаченными блоками. выравнивание по-середине. код давно у меня валялся. сам не тестил
http://ifolder.ru/23715576

Сталкивался не один десяток раз, как говориться, с данным вопросом.

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

Решение, которое я нашёл для себя:

1) выбрал 2-3 варианта количества тумб в ряду. Это и будут наши константы ширины контейнера-родителя.
2) скриптом чекаем ширину окна и выводим оптимальный из вариантов, + ставим корректировкук на онресайз.

Бояться 2х строчек скрипта, которые даже я, дизайнер, и далеко не кодер смог написать самостоятельно за минут 10, абсоютно не стоит.

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

Успехов.

Оказалось что нужно внутреннему диву прописать
.thumbs li div {position:relative;width:302px; height:245px;top:0px;left:0px}
и все прекрасно работает во всех браузерах, проверял начиная с ie5, ff1, NN
и внутри можно размещать абсолютные элементы и т.п.