css, lista não ordenada não exibindo ícone no lugar certo

Question

Estou realmente frustrado com este.Algumas semanas atrás, consegui funcionar no Firefox e, ou seja, muito bem.Voltei hoje para fazer alguns testes e encontrei um problema com a exibição no Firefox e estou pesquisando o código, mas não consigo encontrar nada.Eu poderia usar algumas dicas de quem quiser, tenho certeza de que estou olhando as coisas erradas.Atualizei minha versão do Firefox, mas imagino que meu código esteja quebrado, não o Firefox.Presumo que o problema esteja em algum lugar do meu arquivo css, mas não tenho certeza.

Aqui está o que confirmei até agora.Não parece haver conflitos em outros arquivos css com < ul > ou < li > que possam estar substituindo as configurações.A outra confirmação é que isso funciona bem no Internet Explorer... portanto devo ser um idiota, porque geralmente é o contrário (trabalhando no FF, mas falhando no IE).

Veja como fica no IE (observe a posição do ícone da pasta ao lado do texto):

texto alternativo http://www.redsandstech.com/ie_works.jpg

Veja como fica no FF (observe que o ícone da pasta não está sendo pressionado com o texto correspondente).
texto alternativo http://www.redsandstech.com/ff_broken.jpg

Aqui está a lista não ordenada:

<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>

Aqui está o CSS usado para todo o menu:

/*  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

Você encontrou uma das maiores e mais frustrantes diferenças de CSS entre o IE e outros navegadores.

Meu conselho é usar uma folha de estilo redefinida e estilizar ícones de árvores como imagens de fundo de seus contêineres.

Por exemplo, um dos itens da sua árvore pode ser

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

e tenha o seguinte 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 */
}

}

Eu faço esse tipo de coisa sempre usando DIVs, não combinações UL>LI.YMMV.Você pode fazer a mesma coisa com UL>LI, mas não gosto das diferenças em onde os marcadores são colocados, etc., e se você usar uma folha de estilo redefinida de qualquer maneira, estará simplesmente convertendo os contêineres LI em algo semelhante a um DIV de qualquer forma.

Answer 2

Sua marcação contém alguns erros, então cabe ao navegador como gerar o DOM.

ul só pode ter li como criança, não div ou outro ul.Corrija a marcação e veja o que acontece.

Answer 3

Tenho tido problemas com o Firefox quando uso overflow:hidden em minhas listas.Tente tirar overflow:hidden e veja se isso muda as coisas.

Para o meu problema, se eu usar overflow oculto, minhas listas ordenadas não mostrarão A., B., C.ou 1., 2., 3.etc...(transforma em uma lista não ordenada, sem marcadores)

Answer 4

Não testei, mas isso pode ter a ver com o fato de que o FF usa margem para definir os marcadores enquanto o IE usa preenchimento.Ou é o contrário?Esquecido.