Css, unordered list not displaying icon in right place?

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

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 This is a folder 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.

This is partly why I'm confused. In my css I am using a folder class for my icons just as you point out, but it's not pushing the down. I've never thought of using div...guess I read too much stuff about using unordered lists for menu's....I'd have to change a fair amount of code...if I can't figure it out with the ul, I'll try redoing it with divs and see what happens.

Thanks for your input. – Ronedog Apr 13 '10 at 19:16 @Ronedog: The way to do this is to have each expandable tree node be a container div with two children, both divs. The first child is the "label" element and is visible when the node is visible. The second child is a container div, which is visible only when the node is URL1 may contain other tree nodes, either leaf nodes or "folder" nodes.

The javascript is simple to write, and so are the HTML and CSS. – Robusto Apr 13 '10 at 19:49 Thanks Robusto...I tried using the divs but I broke a lot of other stuff...it just doesn't make any sense to me. The same code worked fine in both browsers a week ago...nothing really changed....except it has!

– Ronedog Apr 13 '10 at 20:18.

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.

– Ronedog Apr 13 '10 at 19:18 no luck. I removed the div and simply added another li and the problem remains. Any other ideas?

– Ronedog Apr 13 '10 at 19:46 Well, I moved the div inside the LI as it is supposed to be, but I keep getting the same result. Any other ideas? – Ronedog Apr 13 '10 at 20:06.

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

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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions