css, ungeordnete Liste Anzeige-Symbol nicht in der richtigen Ort,

Question

Ich bin wirklich mit diesem frustriert. Vor ein paar Wochen bekam ich arbeiten sie in Firefox und also gut. Sie waren heute wieder einige Tests zu tun und ein Problem mit der Anzeige in Firefox gefunden und ich habe den Code gesucht, aber nichts finden können. Ich konnte ein paar Tipps von jemandem bereit verwenden, ich bin sicher, dass ich an den falschen Dingen suchen. Ich habe ein Upgrade meine Firefox-Version aber ich glaube, mein Code ist pleite, nicht firefox. Ich gehe davon aus dem Problem irgendwo in meiner CSS-Datei ist, aber ich bin nicht sicher.

Hier ist, was ich bisher bestätigt haben. Es scheint nicht mit

‚s oder
• ‘ in anderen CSS-Dateien Konflikte zu sein s dass zwingende Einstellungen werden kann. Die andere Bestätigung ist, dass dies funktioniert in Internet Explorer ... also muß ich ein Idiot sein, weil seine in der Regel in der anderen Richtung schon (Arbeits in FF, aber in IE nicht an).

  Hier ist, wie es aussieht, ist in IE (man beachte die Position des Ordnersymbol rechts neben dem Text):

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

  Hier ist, wie es aussieht, ist in FF (Beachten Sie das Ordner-Symbol wird mit seinem entsprechenden Text nach unten gedrückt wird nicht werden).
  alt text http://www.redsandstech.com/ff_broken.jpg

  Hier ist die Ungeordnete Liste:

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

  Hier ist die CSS, die für das gesamte Menü verwendet wird:

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

Sie haben eine der größten und am meisten frustrierend CSS Unterschiede zwischen IE und anderen Browsern angetroffen werden.

Mein Rat ist, einen Reset-Stylesheet zu verwenden und zu Artbaum Symbolen wie wie Hintergrundbilder ihrer Container.

Zum Beispiel ein Ihrer Baumelemente könnten sein

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

und haben folgende 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 */
}

}

ich tun, um diese Art der Sache immer DIVs verwenden, nicht UL> LI-Kombinationen. YMMV. Sie können die gleiche Sache mit UL> LI tun, aber ich weiß nicht, wie die Unterschiede in dem die Kugeln angeordnet sind, usw., und wenn Sie ein Reset Sheet sowieso verwenden, werden Sie einfach die LI Behälter etwas Umwandlung eines DIV ähnelnd trotzdem.

Answer 2

Ihr Markup einige Fehler hat, so dass es an den Browser liegt, wie das DOM zu erzeugen.

ul kann nur li als Kind haben, nicht div oder eine andere ul. Befestigen Sie das Markup, und sehen, was passiert.

Answer 3

Ich habe Probleme mit Firefox haben, wenn ich Überlauf verwenden: auf meine Listen versteckt. Versuchen Sie, aus Überlauf. Versteckt und sehen, ob sich das ändert Dinge

Für meine Frage, ob ich Überlauf versteckt verwenden bewirkt dann, dass es meine geordnete Listen zeigen nicht ihre A., B., C. oder 1., 2., 3. etc ... (wandelt es in eine ungeordnete Liste, ohne Kugeln)

Answer 4

Haben Sie nicht testen, aber dies kann mit der Tatsache zu tun hat, dass FF-Marge verwendet die Kugel Markierungen zu setzen, während IE Polsterung verwendet. Oder ist es umgekehrt? Vergessen.