UL float left не работает корректно, IE 6

#html #css

#HTML #css

Вопрос:

Эти ul находятся внутри контейнера фиксированного размера..

                     <ul>
                        <li><a href="#">ΑAOS</a></li>
                        <li><a href="#">ACC</a></li>
                        <li><a href="#">ACCP</a></li>
                        <li><a href="#">AJP</a></li>
                        <li><a href="#">Anejo</a></li>
                    </ul>

                     <ul>
                        <li><a href="#">ASCO</a></li>
                        <li><a href="#">British Medical Journal</a></li>
                        <li><a href="#">Current Medical Literature</a></li>
                        <li><a href="#">Clinical Publishing</a></li>
                        <li><a href="#"> EC-Europ</a></li>
                    </ul>
                    and another one 
  

Проблема в том, что с IE6 они занимают всю ширину контейнера… Установка li в float left не занимает всю ширину, но я не хочу, чтобы они шли слева друг от друга.

 #journals-list {background: url(img/journals-background.png) ;background-repeat: no-repeat;height: 300px;width: 495px;}
#journals-list ul {float: left;margin-left: 20px;margin-right: 20px;display: inline;zoom:1; margin-top: 55px;}
#journals-list ul li{display: block; height: 39px; line-height: 39px;border-bottom-style: solid;border-bottom-color: #cc784e;border-bottom-width: 1px;padding-right: 15px;padding-left: 10px;}
#journals-list ul li{background-image: url(img/journal-bullet.png);background-repeat: no-repeat;background-position: left center;}
#journals-list ul li:last-child{border-bottom-style:none;border-bottom-width:0}
#journals-list ul li a{text-decoration: none;color: #FFFFFF;}
  

Я использую СБРОС CSS по Майерсу..

Комментарии:

1. Не могли бы вы добавить ссылку на реальный сайт или создать тестовый пример JS Bin ?

2. В Mosaic это тоже не работает. :S

3. jsbin.com/etuve4/5 Вот пример…. Я вынужден поддерживать ie6 и изменить png на 8bit …

Ответ №1:

Похоже, это один из случаев, когда вы не хотите, чтобы hasLayout был установлен. Проблема в том, что настройка высоты в #journals-list ul li приводит к установке hasLayout для этих элементов. Удалите его, и проблема исчезнет. Добавьте, скажем, zoom: 1, и проблема вернется.

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

Комментарии:

1. спасибо, большое вам спасибо… Вы сэкономили мне много часов 🙂 Проблемой была высота. Теперь работает отлично..

2. есть недостаток: ( Li добавляет отступ слева, когда у него нет макета.