Is there any way of tightening up the bullet formatting when using nested/indented bullets?

For instance, this post uses levels of indenting to emphasise a point, but seems to lose a bit of the cohesion between the levels the further you nest them (notice the inner_wall, inner_ground_wall, inner_ground_wall_fixture bullets, where the ultimate parent seems disjointed from its children).

  • I'm not sure whats going on there.. notice the spacing in outer_garden and outer_wall is completely different. The markup looks exactly the same for both but one has <p> tags added and the other doesn't. Very strange. – Cai Apr 20 '16 at 8:42
  • Removing empty space lines changes the way it looks. Still the css has some problems with multi bullet subentries . – joojaa Apr 20 '16 at 9:08

There could be some improvements to the CSS regarding nested lists. Currently the spacing between list items is more than the space between the nested lists first item and its parent list item, like this:

current CSS nested lists

Notice the space between 'outer_wall_window' and 'outer_wall_door' is more than the space between 'outer_wall_window' and it's parent 'outer_wall'.

Adding margin-top: 5px; to the CSS for ul ul, ol ul, ul ol, ol ol would be an improvement:

ul ul, ol ul, ul ol, ol ol {
    margin-bottom: 0;
    margin-top: 5px;
}

updated CSS

  • But surely using ol in the format breaks the semantic meaning of the tag? – Paul Apr 20 '16 at 9:55
  • Not sure I understand what you mean? You can use nested ol and ul together, no problem – Cai Apr 20 '16 at 9:59
  • Yes, you can use them together, but ul is unordered and ol is ordered (usually numbered). To use ol in a distinctive ul placement would break the semantics of the tag. – Paul Apr 20 '16 at 10:11
  • I dont follow... All i suggested was adding margin-top to the existing css for nested lists, I didn't say anything about their use. – Cai Apr 20 '16 at 10:15
  • Oh! I'm not saying that what you've suggested is wrong, just that the way it is presently, technically is. – Paul Apr 20 '16 at 10:29
  • You're confusing me more now... The way what is presented? lol – Cai Apr 20 '16 at 10:36
  • Quote: Adding margin-top: 5px; to the CSS for ul ul, ol ul, ul ol, ol ol would be an improvement:. The use of the ol in the list is technically wrong. Never mind, it's just semantics, like I say. It's a bit like using a table as a layout tool. – Paul Apr 20 '16 at 13:05
  • How is that wrong? you can have an ol inside an ul or a ul inside a ol, theres nothing wrong with that. – Cai Apr 20 '16 at 13:07
  • The ol is not used in the correct context - it is being used in place of a ul, the list is blatantly unordered in format. – Paul Apr 20 '16 at 14:56
  • There is no ol being used? All I talked about was the CSS rule for nested lists. – Cai Apr 20 '16 at 14:58
  • ul ul, ol ul, ul ol, ol ol is a catch all CSS selector for targeting any ul inside another ul, ol inside a ul, ul inside a ol and an ol inside a ol – Cai Apr 20 '16 at 14:59
  • Nrg! Yeah! Not with it today. Never mind - scrap this convo. – Paul Apr 20 '16 at 15:01

EDIT: @CAI was right, it's not the last-child rule that's to blame for the weird lay-out. It's the fact that text in a li element is not seen as a li-element when the li has a ul nested inside of it. As suggested by @CAI in chat, this could be solved by adding a top-padding to nested ul's.

enter image description here


I think this particular CSS is the culprit:

.post-text ul li, .wmd-preview ul li, .post-text ol li, .wmd-preview ol li {
    margin-bottom: .5em;
}
.post-text ul li:last-child, .wmd-preview ul li:last-child, .post-text ol li:last-child, .wmd-preview ol li:last-child {
    margin-bottom: 0;
}

So List-items are getting 0.5em margin at the bottom, except for the last one. This makes the last list-items stick to a list item below it when nesting lists or having multiple lists following each other.

  • Can we, as users, do anything about it, or is this an extremely urgent {ahem} change to be carried out by the dev team? ;o) – Paul Apr 20 '16 at 9:19
  • No, we cannot influence site CSS. This can be filed as a bug, but that could take a while. Mods can move this along, but unless our site goes down or something similar, issues won't be put very high on the priorities list. So for now I'd suggest you find another way to format your answer. – PieBie Apr 20 '16 at 9:21
  • Yeah - that's what I thought. It's hardly end of the world stuff. Thanks for your input, PieBie. – Paul Apr 20 '16 at 9:22
  • Hey,no prob. Thanks for coming in here and pointing this out. – PieBie Apr 20 '16 at 9:24
  • This is actually wrong... Since each nested list is inside its parent <li> this just stops the margins adding up (say you have 6 nested lists each with 10px bottom margin, you would then have 60px bottom margin) This actually does nothing on my browser since margins collapse anyway, I'm assuming its needed for cross-browser compatibility – Cai Apr 20 '16 at 9:27
  • Added my suggestion as an answer :) – Cai Apr 20 '16 at 9:47
  • seen, upvoted it ;) – PieBie Apr 20 '16 at 9:48
  • 1
    @Paul you can use a tool like greasemonkey to inject any changes you wish. remember its your browser not their. – joojaa Apr 20 '16 at 10:52
  • @joojaa: Yeah - I'm not that desperate for a fix. ;o) – Paul Apr 20 '16 at 13:02
  • @Paul well its 3 minutes of work, less time than it took complaining here. – joojaa Apr 20 '16 at 13:13
  • @joojaa: To be honest, I've never used GreaseMonkey or TamperMonkey - never really needed to. – Paul Apr 20 '16 at 15:23
  • @Paul then you haven't needed to use atrocious in house programs that require you to do 12 click on something you do 200 times a day and that should require one click. So then your boss wonders how is it you can process these things in a minute when everybody else takes 6. Answer "I reprogrammed your system to work like it should work". – joojaa Apr 20 '16 at 15:31
  • @joojaa: Ha! Ha! ... Trust me, I have used atrocious in house {expletive} ware... I nearly resigned at one point because of it! – Paul Apr 21 '16 at 8:10

At least some of the spacing issues is due to the markup formatting. If you look at the markup you will notice there is inconsistent line breaks between list items, outer_wall is the only top level item seperated with line breaks:

 - outer_garden
   - outer_garden_plants
 - outer_paving

 - outer_wall
   - outer_wall_window
   - outer_wall_door

 - inner_wall
   - inner_ground_wall
     - inner_ground_wall_fixture
 - inner_ground_floor
   - inner_ground_floor_fixture
 - inner_ground_ceiling
   - inner_ground_ceiling_fixture

If you remove all the unneeded line breaks you get more consistent spacing:

- outer_garden
   - outer_garden_plants
 - outer_paving
 - outer_wall
   - outer_wall_window
   - outer_wall_door
 - inner_wall
   - inner_ground_wall
     - inner_ground_wall_fixture
 - inner_ground_floor
   - inner_ground_floor_fixture
 - inner_ground_ceiling
   - inner_ground_ceiling_fixture
  • outer_garden
    • outer_garden_plants
  • outer_paving
  • outer_wall
    • outer_wall_window
    • outer_wall_door
  • inner_wall
    • inner_ground_wall
      • inner_ground_wall_fixture
  • inner_ground_floor
    • inner_ground_floor_fixture
  • inner_ground_ceiling
    • inner_ground_ceiling_fixture
  • Thanks CAI, but the breaks that you're talking about were placed to attempt to separate the different areas; I was attempting to keep the garden, outer wall and house elements separate. I suppose I may have been taking that a little too far... ;o) – Paul Apr 20 '16 at 9:13
  • I see. You could always add a horizontal rule between them (---) to separate. – Cai Apr 20 '16 at 9:17
  • Ah! Ok. That could work. Thanks. – Paul Apr 20 '16 at 9:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .