CSS, неупорядоченный список не отображает значок в нужном месте - PullRequest
Новая
       13

CSS, неупорядоченный список не отображает значок в нужном месте

1 голос
/ 13 апреля 2010

Я действительно расстроен этим. Несколько недель назад у меня получилось, что он работает как в Firefox, так и просто отлично. Вернулся сегодня, чтобы провести некоторое тестирование и обнаружил проблему с дисплеем в Firefox, и я искал код, но ничего не могу найти. Я мог бы использовать несколько советов от любого желающего, я уверен, что смотрю не на те вещи. Я обновил свою версию Firefox, но я думаю, что мой код не работает, а не Firefox. Я предполагаю, что проблема где-то в моем файле CSS, но я не уверен.

Вот что я подтвердил до сих пор. Кажется, в других файлах css с

  • нет конфликтов, которые могут иметь приоритет над настройками. Другим подтверждением является то, что это отлично работает в Internet Explorer ... поэтому я должен быть идиотом, потому что обычно все наоборот (работает в FF, но не работает в IE).

    Вот как это выглядит в IE (обратите внимание на положение значка папки прямо рядом с текстом):

    альтернативный текст http://www.redsandstech.com/ie_works.jpg

    Вот как это выглядит в FF (обратите внимание, что значок папки не сдвигается вместе с соответствующим текстом).
    альтернативный текст http://www.redsandstech.com/ff_broken.jpg

    Вот неупорядоченный список: 

    <ul id="nav">
    <li><a>Utah</a></li>
        <ul>
           <li><a>ParkCity</a>
               <ul>
                  <li><a>Com1</a></li>
                      <ul>
                          <li class="folder_closed"><a>Timber</a></li>
                          <div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
                      </ul>
               </ul>
        </ul>
</ul>

    Вот CSS, который используется для всего меню: 

    /*  MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
    margin-left:0;
    margin-right:0;
    padding-left:0px;
    text-indent:15px;   
}
ul#nav div{
  overflow: hidden;
}

#nav li>a:hover { 
    cursor: pointer;
}
#nav li > ul{ 
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
    display:none; 
    margin-left:0px; 
    margin-right:0px;
    padding-left:15px;
    padding-right:0px;
    text-indent:15px;
}
#nav li {
    list-style-type:none;
    list-style-image: none;
}
#nav > li{
    vertical-align: top;
    left:0px;
    text-align:left;
    clear: both;
    margin:0px;
    margin-right:0px;
    padding-right:0px;
}
.menu_parent{
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: 0px 1px; 
    position:relative;
}
.menu_parent_minimized{
    background-image: url(../images/minimize.png);
    background-repeat: no-repeat;
    background-position: 0px 1px; 
    position:relative;
}
.folder_closed{
    position:relative;
    background-image: url(../images/folder_closed12x14.png);
    background-repeat: no-repeat;
    background-position: 0px -2px; 
}

.folder_open{
    position:relative;
    background-image: url(../images/folder_open12x14.png);
    background-repeat: no-repeat;
    background-position: 0px -2px; 
}
</ul>

Ответы [ 4 ]

2 голосов
/ 13 апреля 2010

Вы столкнулись с одним из самых больших и разочаровывающих различий в CSS между IE и другими браузерами.

Мой совет - использовать таблицу стилей сброса и стилизовать значки деревьев в качестве фоновых изображений их контейнеров.

Например, один из элементов вашего дерева может быть 

<div class="folder">This is a folder</div>

и иметь следующий CSS: 

.folder {
  background-image: url(someImage.png);
  background-repeat: no-repeat;
  background-position: 0 0; /* or wherever you like */
  text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}

}

Я делаю такие вещи всегда , используя DIV, а не UL> LI комбинации. YMMV. Вы можете сделать то же самое с UL> LI, но мне не нравятся различия в расположении маркеров и т. Д., И если вы все равно используете таблицу стилей сброса, вы просто конвертируете контейнеры LI во что-то, напоминающее DIV в любом случае.

1 голос
/ 13 апреля 2010

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

ul может иметь только li в качестве ребенка, но не div или другого ul. Исправьте разметку и посмотрите, что получится.

0 голосов
/ 02 августа 2010

Не тестировал, но это может быть связано с тем, что FF использует маржу для установки маркеров, в то время как IE использует заполнение. Или это наоборот? Забыл.

0 голосов
/ 02 августа 2010

У меня были проблемы с Firefox, когда я использовал переполнение: скрыто в моих списках. Попробуйте убрать переполнение: скрыто и посмотрите, изменит ли это что-либо.

Для моей проблемы, если я использую скрытый переполнение, то это приводит к тому, что мои упорядоченные списки не показывают их A., B., C. или 1., 2., 3. и т.д ... (превращает его в неупорядоченный список без маркеров)

...