css, unordered list not displaying icon in right place

Question

I'm really frustrated with this one. A few weeks ago I got it working in both firefox and ie just fine. Went back today to do some testing and found a problem with the display in firefox and I've been searching the code but can't find anything. I could use a few tips from anyone willing, I'm sure I'm looking at the wrong things. I upgraded my firefox version but I imagine my code is broke, not firefox. I'm assuming the problem is somewhere in my css file, but I'm not sure.

Here's what I've confirmed so far. There don't seem to be conflicts in other css files with < ul >'s or < li >'s that may be overriding settings. The other confirmation is that This works fine in Internet Explorer...therefore I must be an idiot, because its usually been the other way around (working in FF, but failing in IE).

Here's How it looks in IE (Notice the position of the folder icon right next to the text):

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

Here's how it looks in FF (Notice the folder icon is not being pushed down with its corresponding text).
alt text http://www.redsandstech.com/ff_broken.jpg

Here's the Unordered List:

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

Here's the CSS that is used for the whole 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

You have encountered one of the greatest and most frustrating CSS differences between IE and other browsers.

My advice is to use a reset stylesheet, and to style tree icons as backgroundImages of their containers.

For example, one of your tree items might be

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

and have the following 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 */
}

}

I do this kind of thing always using DIVs, not UL>LI combinations. YMMV. You can do the same thing with UL>LI, but I don't like the differences in where the bullets are placed, etc., and if you use a reset stylesheet anyway, you are simply converting the LI containers to something resembling a DIV anyway.

Answer 2

Your markup has some errors, so it is up to the browser how to generate the DOM.

ul can only have li as child, not div or another ul. Fix the markup, and see what happens.

Answer 3

I've been having problems with firefox when I use overflow:hidden on my lists. Try taking out overflow:hidden and see if that changes things.

For my issue, if I use overflow hidden then it causes my ordered lists to not show their A.,B.,C. or 1., 2., 3. etc... (turns it into an unordered list, with no bullets)

Answer 4

Didn't test but this may have to do with the fact that FF uses margin to set the bullet marks while IE uses padding. Or is it the other way around? Forgot.