margins on nested lists

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
cayennep
Sr. Propeller Head
Posts: 390
Joined: Mon Jul 26, 2010 3:42 pm

margins on nested lists

Post by cayennep »

Still battling w/ old vs new stylesheets and now have huge indents/margins on nested list items & can't figure out why. Looking at the formatting in flare does not help all that much, as all left margins are set to 0.

Do I need to create a li li style with negative margins?? Or a ul ul one? And the ul is inside an ol, so maybe I also need a li li li??? Just give me a direction to aim for please, if possible??

Or, since the ul is inside an ol, maybe I need ul ul on that one, and then li li on the nested list items inside that?? argh

Again, I'd really like some hi-level info here so I can understand where/what to tackle. Folks are good at providing tons of details and examples, but I prefer to understand what I'm looking at.

Help greatly appreciated, I keep stumbling on solutions but less stumbling would be good!
ArmandFrvr
Propeller Head
Posts: 29
Joined: Tue Jan 08, 2013 9:48 am

Re: margins on nested lists

Post by ArmandFrvr »

You might want to try padding-left. For example:

ul, ol {
padding-left: 30px;
}

You don't need to apply it to each nesting level. If you style ul, it will also style ul ul and ul ul ul.

The other thing to look at is whether your lists are nested inside a div or paragraph that has padding on it.

If you haven't used your browser's inspector tools before I highly recommend checking that out. You can inspect the output and see what exact lines in your stylesheet(s) are affecting the results, as well as the margins and padding on each object.
https://codeburst.io/how-to-view-and-ed ... 458a740a06
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: margins on nested lists

Post by Psider »

You want to indent your containers, not the individual items inside the containers. Everything inside the container will align using their normal values.

But you have to remember inheritence (the cascade in cascading style sheets (CSS)). Say you have ul{ margin:1em; padding:2em} and ul ul { margin:3em;}. Your nested list will actually be indented 5em, not 3em (2em padding from the ul definition and 3em margin from the ul ul definition). This is compounded for lists because margin and padding are calculated from the text NOT from the bullet so you need a larger than expected value for your margin or padding. (At least, it always confuses me as I expect it to count from the bullet. :) )

So, especially for lists, set either a margin or padding on the container only, and zero out the one you didn't use. You only need to zero out the unused value for the first level as it will be inherited for the nested containers. Zeroing out the value you didn't use also deals with historical browser differences.

Then, assuming you want the nested bullet to line up with the first character of the preceding list item, you may need to adjust the margins for your nested containers. I'm not sure why exactly but I think it has to do with the default values used by the browser. So you might find in your scenario that the ol ul and ul ul definitions aren't necessary, but you'll needto test to be sure.

So, for the list scenario using margins as an example:

Set the ol and ul margin first. Then, if you want more space between the bullet and the text, set padding-left on the li.

Once you've got that right, set the ol ul and ul ul margins as these will depend on your other two values. You'll probably need slightly different values because the alignment of the bullets and numbers seems to be slightly different. You shouldn't need to do more levels than ol ul and ul ul (and ol ol if you need those too), as these definitions should take care of most scenarios.

e.g.
ol, ul {
margin-left: 2em;
padding-left:0;
}

li {
padding-left: 0.7em;
}

ol ul {
margin-left: 1.8em;
}
ul ul {
margin-left: 2em;
}
cayennep
Sr. Propeller Head
Posts: 390
Joined: Mon Jul 26, 2010 3:42 pm

Re: margins on nested lists

Post by cayennep »

I am setting margins (only, no padding) on the ol and ul containers only, but how do I keep them from multiplying? Will try smaller values next, and double-check that that is the truth.

Oddly, I've not had this issue in the past, not sure what is going on tho.

To the person who suggested 30 px padding - is there some reason for that specific number/setting? The problem is that the indent is too big, so 30px is a lot of space it seems.

I am using the formatting inspector in flare, as well as chrome - but still can't tell all that's going on.

Removing all the divs, and lists are not in paragraphs - and paragraphs inside lists now seem to be working as I want. Just the level 2 and beyond list items are indented too far (yes, I'd rather not use 3 levels but trying to just do a basic cleanup of existing content right now rather than rework it).

Thanks, will have a look at these tips as well.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: margins on nested lists

Post by Psider »

Can you post some code? I can look at the css settings plus the output code and try to explain how they are interacting. (Note I don't have a Flare license right now, so I might not get a 100% accurate view of things.)
Post Reply