3

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

2
  • 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, 2016 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, 2016 at 9:08

3 Answers 3

Reset to default
4

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

12
  • But surely using ol in the format breaks the semantic meaning of the tag?
    – Paul
    Apr 20, 2016 at 9:55
  • Not sure I understand what you mean? You can use nested ol and ul together, no problem
    – Cai
    Apr 20, 2016 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, 2016 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, 2016 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, 2016 at 10:29
  • You're confusing me more now... The way what is presented? lol
    – Cai
    Apr 20, 2016 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, 2016 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, 2016 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, 2016 at 14:56
  • There is no ol being used? All I talked about was the CSS rule for nested lists.
    – Cai
    Apr 20, 2016 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, 2016 at 14:59
  • Nrg! Yeah! Not with it today. Never mind - scrap this convo.
    – Paul
    Apr 20, 2016 at 15:01
4

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.

13
  • 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, 2016 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 Mod
    Apr 20, 2016 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, 2016 at 9:22
  • Hey,no prob. Thanks for coming in here and pointing this out.
    – PieBie Mod
    Apr 20, 2016 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, 2016 at 9:27
  • Added my suggestion as an answer :)
    – Cai
    Apr 20, 2016 at 9:47
  • seen, upvoted it ;)
    – PieBie Mod
    Apr 20, 2016 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, 2016 at 10:52
  • @joojaa: Yeah - I'm not that desperate for a fix. ;o)
    – Paul
    Apr 20, 2016 at 13:02
  • @Paul well its 3 minutes of work, less time than it took complaining here.
    – joojaa
    Apr 20, 2016 at 13:13
  • @joojaa: To be honest, I've never used GreaseMonkey or TamperMonkey - never really needed to.
    – Paul
    Apr 20, 2016 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, 2016 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, 2016 at 8:10
3

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
3
  • 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, 2016 at 9:13
  • I see. You could always add a horizontal rule between them (---) to separate.
    – Cai
    Apr 20, 2016 at 9:17
  • Ah! Ok. That could work. Thanks.
    – Paul
    Apr 20, 2016 at 9:20

You must log in to answer this question.

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