CSS ، القائمة غير المرتبة لا تعرض أيقونة في المكان الصحيح

Question

أنا محبط حقًا من هذا. قبل بضعة أسابيع ، جعلتها تعمل في كل من Firefox و IE على ما يرام. عاد اليوم للقيام ببعض الاختبارات ووجدت مشكلة في العرض في Firefox وكنت أبحث عن الكود ولكن لا يمكنني العثور على أي شيء. يمكنني استخدام بعض النصائح من أي شخص على استعداد ، أنا متأكد من أنني أبحث في الأشياء الخاطئة. قمت بترقية إصدار Firefox الخاص بي ولكني أتصور أن الكود الخاص بي محطم ، وليس Firefox. أفترض أن المشكلة في مكان ما في ملف CSS الخاص بي ، لكنني لست متأكدًا.

إليك ما أكدته حتى الآن. لا يبدو أن هناك تعارضات في ملفات CSS الأخرى مع <ul> أو <li> التي قد تكون الإعدادات المتجاوز. التأكيد الآخر هو أن هذا يعمل بشكل جيد في Internet Explorer ... لذلك يجب أن أكون أحمق ، لأنه عادة ما يكون العكس (العمل في FF ، ولكن الفشل في IE).

إليك ما يبدو في IE (لاحظ موضع أيقونة المجلد بجوار النص مباشرة):

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

إليك ما يبدو في FF (لاحظ أن أيقونة المجلد لا يتم دفعها لأسفل بنصها المقابل).
alt text http://www.redsandstech.com/ff_broken.jpg

ها هي القائمة غير المرتبة:

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

إليك CSS المستخدمة في القائمة بأكملها:

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

لقد واجهت واحدة من أعظم اختلافات CSS وأكثرها إحباطًا بين IE والمتصفحات الأخرى.

نصيحتي هي استخدام ورقة أنماط إعادة تعيين ، ولأيقونات الأشجار على شكل خلفية لحاوياتها.

على سبيل المثال ، قد يكون أحد عناصر الشجرة الخاصة بك

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

ولديك 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 */
}

}

أفعل هذا النوع من الأشياء دائماً باستخدام divs ، وليس UL> LI مجموعات. ymmv. يمكنك أن تفعل الشيء نفسه مع UL> li ، لكنني لا أحب الاختلافات في المكان الذي يتم فيه وضع الرصاص ، وما إلى ذلك ، وإذا كنت تستخدم ورقة إعادة تعيين على أي حال ، فأنت ببساطة تقوم بتحويل حاويات LI إلى شيء يشبه Div على أي حال.

Answer 2

يحتوي الترميز الخاص بك على بعض الأخطاء ، لذا فإن الأمر متروك للمتصفح كيفية إنشاء DOM.

ul يمكن أن يكون فقط li كطفل ، وليس div أو آخر ul. إصلاح الترميز ، وانظر ما يحدث.

Answer 3

لقد واجهت مشاكل مع Firefox عندما أستخدم الفائض: مخبأة في قوائم بلدي. حاول إخراج الفائض: مخفي ومعرفة ما إذا كان هذا يغير الأشياء.

بالنسبة لمشكلتي ، إذا استخدمت VOLLOW HIDDEN ، فإنها تتسبب في عدم إظهار قوائمي المطلوبة الخاصة بي. أو 1. ، 2. ، 3. إلخ ... (يحولها إلى قائمة غير مرتبة ، بدون رصاصات)

Answer 4

لم يختبر ولكن قد يكون هذا يتعلق بحقيقة أن FF يستخدم الهامش لتعيين علامات الرصاص بينما يستخدم IE الحشو. أم هو العكس؟ نسيت.