Jump to content
  • 0

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


Love_silense
 Share

Question

есть многострочная менюшка, состоящая из елементов типа 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;

}

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

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 нельзя писать несколько селекторов через запятую

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

:(

Link to comment
Share on other sites

  • 0

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

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

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

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

Edited by Love_silense
Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Edited by senseysensor
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy