css, liste non ordonnée n'affichant pas l'icône au bon endroit

Question

Je suis vraiment frustré par celui-ci.Il y a quelques semaines, je l'ai fait fonctionner à la fois dans Firefox et c'est à dire très bien.Je suis revenu aujourd'hui pour faire quelques tests et j'ai trouvé un problème avec l'affichage dans Firefox. J'ai cherché le code mais je n'ai rien trouvé.Je pourrais utiliser quelques conseils de quiconque le voudrait, je suis sûr que je regarde les mauvaises choses.J'ai mis à jour ma version de Firefox mais j'imagine que mon code est cassé, pas Firefox.Je suppose que le problème se situe quelque part dans mon fichier CSS, mais je n'en suis pas sûr.

Voici ce que j'ai confirmé jusqu'à présent.Il ne semble pas y avoir de conflits dans d'autres fichiers CSS avec des < ul > ou des < li > qui pourraient remplacer les paramètres.L'autre confirmation est que cela fonctionne bien dans Internet Explorer... donc je dois être un idiot, car c'est généralement l'inverse (travailler dans FF, mais échouer dans IE).

Voici à quoi cela ressemble dans IE (notez la position de l'icône du dossier juste à côté du texte) :

texte alternatif http://www.redsandstech.com/ie_works.jpg

Voici à quoi cela ressemble dans FF (notez que l'icône du dossier n'est pas enfoncée avec son texte correspondant).
texte alternatif http://www.redsandstech.com/ff_broken.jpg

Voici la liste non ordonnée :

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

Voici le CSS utilisé pour l'ensemble du 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

Vous avez rencontré l'un des plus grands et la plupart des différences CSS frustrants entre IE et d'autres navigateurs.

Mon conseil est d'utiliser une feuille de style de réinitialisation et le style des icônes d'arbres comme backgroundImages de leurs conteneurs.

Par exemple, un de vos objets d'arbre pourrait être

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

et ont le CSS suivant:

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

}

Je fais ce genre de chose toujours en utilisant DIVs, pas des combinaisons UL> LI. YMMV. Vous pouvez faire la même chose avec UL> LI, mais je ne aime pas les différences où les balles sont placées, etc., et si vous utilisez une feuille de style de réinitialisation de toute façon, vous convertir simplement les conteneurs de LI à quelque chose qui ressemble à un DIV de toute façon.

Answer 2

Votre balisage a quelques erreurs, il est donc au navigateur comment générer les DOM.

ul ne peut avoir li comme enfant, pas div ou d'une autre ul. Fixer le balisage, et de voir ce qui se passe.

Answer 3

J'ai eu des problèmes avec Firefox lorsque j'utilise overflow:hidden sur mes listes.Essayez de supprimer overflow:hidden et voyez si cela change les choses.

Pour mon problème, si j'utilise le débordement masqué, mes listes ordonnées n'affichent pas leur A.,B.,C.ou 1., 2., 3.etc...(le transforme en une liste non ordonnée, sans puces)

Answer 4

n'a pas testé mais cela peut avoir à faire avec le fait que FF utilise la marge pour définir les traces de balles tandis que IE utilise un rembourrage. Ou est-ce l'inverse? Vous avez oublié.