Inline-block в IE6. какая-то лажа=(

[Love_silense]

есть многострочная менюшка, состоящая из елементов типа inline-block с фоновой картинкой и именем элемента. Через каждые четыре пункта вставлен тег </br>. В FF и опере все происходит адекватно, в IE6 перевод на новую строку просто игнорируется и пункты выстраиваются по всей ширине экрана.

Использую атрибуты

Display:inline;

zoom:1;

для получения инлайн-блока в експлорере.

стили выглядят так:

html>body li.catalog_block, li.first_in_line_catalog_block для всех кроме ие

{

list-style:none;

display: inline-block;

width:132px;

height:188px;

text-align:center;

color:#f3f3f3;

font:bolder 15px/10px Sans-serif;

text-decoration:none;

}

*html li.catalog_block, li.first_in_line_catalog_block для ие

{

list-style:none;

display: inline;

width:132px;

height:188px;

text-align:center;

font:bolder 15px/10px Sans-serif;

text-decoration:none;

color:#f3f3f3;

cursor:pointer;

zoom:1;

}

[psywalker]

выложи посмотреть страницу

[mishka]

li.catalog_block, li.first_in_line_catalog_block{
list-style:none;
display: inline-block;
width:132px;
height:188px;
text-align:center;
color:#f3f3f3;
font:bolder 15px/10px Sans-serif;
text-decoration:none;
}

* html li.catalog_block{
display: inline;
cursor:pointer;
zoom:1;
}
* html li.first_in_line_catalog_block{
display: inline;
cursor:pointer;
zoom:1;
}

*html нельзя писать несколько селекторов через запятую

[Love_silense]

К сожалению выложить сейчас возможности нет(перевёрстываю под битрикс и что-б выложить нужно весь сайт обновлять иначе компоненты могут не "распознатся" ибо ровными руками тоже не отличаюсь ).

За фишку с *html спасибо. Не помогло, но буду знать на будущее. Если вы можете подсказать где в интернете можно почитать книгу по CSS(а не короткие статейки каких немеряно и по каким я цсс и разбирал) буду очень благодарен. Или не в интернете а просто название что-б можно было поискать бумажный вариант.

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

[mishka]

Проблема в zoom:1; Постарайтесь избавиться от него

Вот и первый баг использования zoom

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

У вас что получилось

<ul>
	<li></li>
	<div>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</div>
	<li></li>
<ul>

[Love_silense]

Не настолько все гораздо проще.

получилось что-то вроде

<div>	 ширина 4Х
	 <ul>
	   <li></li>	ширина Х
	   .....много много ли.....
	   <li></li>
	 </ul>
</div>

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

Edited August 28, 2009 by Love_silense

[mishka]

А флотнуть вместо инлине-блок нельзя?

У вас несработал <br /> в ие6 из-за zoom

Попробовал - флотать нельзя

Edited August 28, 2009 by mishka2

[senseysensor]

Скорее всего проблема в том, что внутри блока inline-block находится какой-то блочный элемент. У меня такая же лажа была. Все их надо заменить встроенными (inline).

zoom использовать необязательно (хотя насколько я знаю он не повредит).

Достаточно прописать что-то типа:

display:-moz-inline-stack; display:inline-block; *display:inline;

возможно потребуется конкретно указать высоту и/или ширину (вроде бы не надо)

ps ну и хак со звёздочкой если что не рекомендуется использовать.

Edited January 25, 2011 by senseysensor