css, lista non ordinata che non visualizza un'icona nel posto giusto

Question

Sono davvero frustrato con questo. Qualche settimana fa ho ottenuto che funziona in Firefox e IE, più che bene. Tornato oggi per fare qualche test e trovato un problema con il display in Firefox e Ho cercato il codice, ma non riesco a trovare nulla. Potrei usare un paio di consigli da chiunque abbia voglia, sono sicuro che mi sto guardando le cose sbagliate. Ho aggiornato la mia versione di Firefox ma immagino che il mio codice è rotto, non firefox. Sto assumendo il problema è da qualche parte nel mio file css, ma non sono sicuro.

Ecco quello che ho confermato finora. Non sembrano essere i conflitti in altri file CSS con

's o
• ' impostazioni s che può essere prevalente. L'altra conferma è che questo funziona bene in Internet Explorer ... quindi devo essere un idiota, perché il suo solito stato il contrario (lavorare in FF, ma non riuscendo in IE).

  Ecco come appare in IE (Avviso la posizione dell'icona della cartella accanto al testo):

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

  Ecco come appare in FF (Avviso l'icona della cartella non viene spinto verso il basso con il suo testo corrispondente).
  alt text http://www.redsandstech.com/ff_broken.jpg

  Ecco la lista non ordinata:

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

  Ecco il CSS che viene utilizzato per l'intero 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

Hai incontrato uno dei più grandi e più frustranti differenze CSS tra IE e altri browser.

Il mio consiglio è quello di utilizzare un foglio di stile reset, e ad albero icone di stile come backgroundImages dei loro contenitori.

Per esempio, uno dei tuoi oggetti d'albero potrebbe essere

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

e hanno il seguente 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 */
}

}

faccio questo genere di cose sempre utilizzando DIV, non combinazioni UL> LI. YMMV. Si può fare la stessa cosa con UL> LI, ma non mi piace l'differenze di dove si trovano le pallottole, ecc, e se si utilizza un foglio di stile di reset in ogni caso, si sono semplicemente la conversione dei contenitori LI a qualcosa di simile a un DIV in ogni caso.

Answer 2

Il tuo markup ha degli errori, per cui spetta al browser come generare il DOM.

ul può avere solo li come bambino, non div o in un altro ul. Fissare il markup, e vedere cosa succede.

Answer 3

Ho avuto problemi con Firefox quando uso overflow: hidden sulle mie liste. Prova a prendere fuori overflow:. Nascosti e vedere se questo cambia le cose

Per il mio problema, se uso troppo pieno nascosto allora provoca le mie liste ordinate di non mostrare la loro A., B., C. oppure 1., 2., 3. ecc ... (lo trasforma in una lista non ordinata, senza proiettili)

Answer 4

Non provare, ma questo può avere a che fare con il fatto che FF utilizza margine per impostare i segni dei proiettili mentre IE utilizza imbottitura. O è il contrario? Dimenticato.