Sonic and Sega Retro Message Board: CSS: can I make nested list items justified with outer ones - Sonic and Sega Retro Message Board

Jump to content

Hey there, Guest!  (Log In · Register) Help
Page 1 of 1
    Locked
    Locked Forum

CSS: can I make nested list items justified with outer ones without manually specifying padding

#1 User is offline Andlabs 

Posted 28 April 2013 - 06:14 PM

  • 「いっきまーす」
  • Posts: 2175
  • Joined: 11-July 08
  • Gender:Male
  • Project:Writing my own MD/Genesis sound driver :D
  • Wiki edits:7,061
HTML
<ul>
    <li>foo
        <ul>
            <li>adsdas</li>
            <li>adsdas</li>
            <li>adsdas</li>
            <li>adsdas
                <ul>
                    <li>abc</li>
                </ul>
            </li>
            <li>asdasd</li>
        </ul>    
    </li>
</ul>
CSS
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:
- 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.
This post has been edited by Andlabs: 28 April 2013 - 06:15 PM

#2 User is offline Vangar 

Posted 28 April 2013 - 08:50 PM

  • Winrar?
  • Posts: 3364
  • Joined: 08-January 04
  • Gender:Male
  • Location:Australia
  • Project:Heroic Multimedia
  • Wiki edits:2
Isn't it as simple as this?

http://jsfiddle.net/gfuDA/

#3 User is offline Andlabs 

Posted 28 April 2013 - 09:53 PM

  • 「いっきまーす」
  • Posts: 2175
  • Joined: 11-July 08
  • Gender:Male
  • Project:Writing my own MD/Genesis sound driver :D
  • Wiki edits:7,061
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.

#4 User is offline Vangar 

Posted 29 April 2013 - 06:07 AM

  • Winrar?
  • Posts: 3364
  • Joined: 08-January 04
  • Gender:Male
  • Location:Australia
  • Project:Heroic Multimedia
  • Wiki edits:2
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?

#5 User is offline Andlabs 

Posted 29 April 2013 - 01:45 PM

  • 「いっきまーす」
  • Posts: 2175
  • Joined: 11-July 08
  • Gender:Male
  • Project:Writing my own MD/Genesis sound driver :D
  • Wiki edits:7,061
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.

#6 User is offline Dr. Kylstein 

Posted 29 April 2013 - 02:13 PM

  • Posts: 84
  • Joined: 05-June 08
  • Gender:Not Telling
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.)

#7 User is offline Andlabs 

Posted 01 May 2013 - 10:36 AM

  • 「いっきまーす」
  • Posts: 2175
  • Joined: 11-July 08
  • Gender:Male
  • Project:Writing my own MD/Genesis sound driver :D
  • Wiki edits:7,061
Bah, maybe. If there really is no way to get it to be exact, thanks anyway.

Page 1 of 1
    Locked
    Locked Forum

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users