css, lista desordenada no mostrar el icono en el lugar correcto

Question

Estoy muy frustrado con éste. Hace unas semanas, lo tengo trabajando tanto en Firefox e IE muy bien. Regresé hoy para hacer algunas pruebas y se encontró un problema con la pantalla en Firefox y he estado buscando el código, pero no puedo encontrar nada. Podría utilizar algunos consejos de cualquiera que esté dispuesto, estoy seguro de que estoy mirando las cosas mal. He actualizado mi versión de Firefox, pero me imagino que mi código está roto, no Firefox. Estoy asumiendo que el problema está en algún lugar en mi archivo css, pero no estoy seguro.

Esto es lo que he confirmado hasta ahora. No parece que haya conflictos en otros archivos css con

's o
• ' s ajustes que pueden ser de primer orden. La otra es que la confirmación Esto funciona bien en Internet Explorer ... por lo tanto debe ser un idiota, por lo general debido a que su estado al revés (de trabajo en FF, pero no en IE).

  Así es como se ve en IE (nótese la posición del icono de la carpeta justo al lado del texto):

  alt text http://www.redsandstech.com/ie_works.jpg

  Así es como se ve en FF (Observe el icono de la carpeta no está siendo empujado hacia abajo con su texto correspondiente).
  alt text http://www.redsandstech.com/ff_broken.jpg

  Aquí está la lista desordenada:

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

  Aquí está la CSS que se utiliza para todo el menú:

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

Se ha encontrado una de las mayores y más frustrantes diferencias entre CSS IE y otros navegadores.

Mi consejo es utilizar una hoja de estilos de reset, y para árboles de iconos de estilo como backgroundImages de sus contenedores.

Por ejemplo, uno de los elementos del árbol podría ser

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

y tienen el siguiente 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 */
}

}

que hago este tipo de cosas siempre utilizando DIVs, no combinaciones UL> LI. Tu caso es distinto. Puede hacer lo mismo con la UL> LI, pero no como las diferencias en donde las balas se colocan, etc., y si se utiliza una hoja de estilo de reposición de todos modos, que son simplemente convertir los contenedores LI a algo parecido a un DIV de todos modos.

Answer 2

Su marcado tiene algunos errores, por lo que corresponde al navegador cómo generar el DOM.

ul sólo puede tener li como niño, no div u otra ul. Corrija las marcas, y ver qué pasa.

Answer 3

He tenido problemas con Firefox cuando uso overflow: hidden en mis listas. Pruebe a retirar desbordamiento:. Oculta y ver si eso cambia las cosas

Para mi problema, si uso desbordamiento escondido entonces hace que mis listas ordenadas para no mostrar su A., B., C. o 1., 2., 3., etc ... (la convierte en una lista desordenada, sin balas)

Answer 4

No he probado, pero esto puede tener que ver con el hecho de que utiliza FF margen para ajustar las marcas de bala, mientras que IE utiliza relleno. ¿O es al revés? ¿Ha olvidado.