HTML Code (Text): [LIST] [*]foo [LIST] [*]adsdas [*]adsdas [*]adsdas [*]adsdas [LIST] [*]abc [/LIST] [*]asdasd [/LIST] [/LIST] CSS Code (Text): ul ul { list-style-position: inside; padding-left: 0px; } Or try a playground: http://jsfiddle.net/PGVnB/1/ I'd like the inner ul to also have its bullet justified with the leftmost margin of the text of the outer bullet, but no matter what I do (ul ul ul, ul ul li ul, ul li ul ul, ul li ul li ul, ul > ul, putting ul ul ul as a separate block, putting that separate block first, removing padding-left from that separate block), the third-level bullet refuses to align itself with the text of the second-level bullet, instead aligning to the bullet itself. That is to say, I want it to look like this: Code (Text): - level 1 - level 2 - level 2 - level 3 - level 2 I have a feeling list-style-position: inside is screwing up the browser's idea of where the left margin of the second level bullet is... Is there a solution to this problem that does not involve manually setting padding values and just using those (which is what Sik suggested)? Thanks.
The issue with that is that we are still using the padding value there; I'd like it to work independently of any padding or margin values.
I'm not really sure how you'd get it to work without padding values, as that is how it usually works, doesn't it? With my solution you are giving the same padding values to every nested ul, so they should all work the same now matter how deep you go. What is the issue with using padding?
Would the padding value need to chnge across different fonts, font sizes, or borwsers though? I'm trying to come up with a general solution.
You aren't using "em"s? It may not be exact for all fonts, but you should be able to get close and have it work at any size of a given font. (pixel positioning is evil.)
