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

Question

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

Вот что я подтвердил на данный момент.Кажется, в других файлах CSS нет конфликтов с <ul> или <li>, которые могут переопределять настройки.Другое подтверждение: это отлично работает в 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>

Answer 1

Вы столкнулись с одним из самых больших и самых неприятных различий 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.ЮММВ.Вы можете сделать то же самое с UL>LI, но мне не нравятся различия в том, где размещаются маркеры и т. д., и если вы все равно используете таблицу стилей сброса, вы просто преобразуете контейнеры LI во что-то похожее на DIV. в любом случае.

Answer 2

Ваша разметка имеет некоторые ошибки, поэтому он находится в решающем браузере, как генерировать DOM.

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

Answer 3

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

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

Answer 4

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