li item text in my site appears this way — Everything under the first row is juxtaposed to the edge:
Is is possible to juxtapose it to the starting point of the first-row text, like this ? (note the empty space under the disc)
Interesting… that’s how list items are supposed to be displayed, so it might be a locale-related bug due to the right-2-left text orientation. Now I found such a list on your home page and couldn’t find an immediate solution; what you could do however is set list-style: none;, apply a certain padding-right to the containing ul element,and then add your own list discs using an absolutely positioned :before pseudo-element.
1 Like
Change the marker setting for the list by removing the “inside” specification:
from:
#content ul > li {
list-style: inside none disc;
margin: 0 auto 15px;
}
to:
#content ul > li {
list-style: disc outside none; /* these are the default settings, by the way */
margin: 0 auto 15px;
}
1 Like
ronpat, can you please tell me where you saw such a syntax? I can’t find it in my benia.css file nor on the base-theme css files (the theme is called Basic and it’s a Drupal base/starter theme).
I don’t know what to say regarding this.
Do you have a “local stylesheet”? one that follows the others where you can make entries?
If “Yes”, then add this to the “local” stylesheet:
#content ul > li {
list-style-position: outside;
)
Putting it in the last stylesheet will allow it to override the earlier Drupal code.
Oh, my… I just noticed that the Drupal code for you main site has changed. NEVER change the theme stylesheets. ALWAYS make changes in a “local” stylesheet so they will override the theme styles. If the theme code is ever updated, you want to be able to keep your custom styles and that will not happen if you have modified the theme stylesheets.
To restore you lost code, place the changed code in post #3 in a “local” stylesheet and hope nothing else was changed that might affect the override.
#content ul > li {
list-style: disc outside none; /* these are the default settings, by the way */
margin: 0 auto 15px;
}
1 Like
I guess what you noticed was in a moment I changed the CSS online for a check… Happens sometimes for a sec or two… In any case I only concern for this li appearance problem.
Is this solved or are you still having the problem?
Oh, so it was only a matter of inside-outside? I missed that from your answer as I didn’t even imagined this would be the sole cause of the problem… I always worked with “inside” as it seemed more aesthetic to me. I now understand the importance of working with “outside” and to just give proper padding to give the “inside” look.
The problem is now solved, thank you so much!
1 Like
One last question Ronpat. list-style-position: outside made some li-style-type: none; items to appear “pushed away”. I managed to fix that with padding-right (RTL), with different padding values to different menus… Moreover I had to create 2 versions of this code — Mobile first, and min-width: 1080px.
When I used list-style-position: inside, I had no use of such specific, padding codes…
Do you know a “better” fix such pushes, with less code?
Of course, I don’t know which items are behaving which way (that require padding or not), but padding on the list items is one of the default list properties to allow space for the list item marker. That default padding on the list item is 40px. (I usually substitute ems so it is fluid.) I rarely use list-style-position:inside. If I don’t need the offset for the list marker, I just set the padding-left (LTR in my case) to zero.
Depending on your needs, you may need to assign a couple of different classes to the lists so the necessary alterations to the list’s default properties are applied to each situation. I’ve done that many times.
The attached file provides examples of the basic settings of lists. Copy it to your computer and open it in your browser. You’ll have to change the font direction. There’s even an example of using a asterisk as a marker. 
Hopefully, it will help you work out the best settings to use in different situations.
list-marker-position4.html (3.1 KB)
2 Likes
When you use list-style:inside the marker (bullet or number) becomes an inline element just like any other piece of text and sits at the beginning of the line with no need for padding or margins as it occupies space inside the line.
Of course when the line of text wraps the text will wrap underneath the list marker and not inline with the start of actual text content as with list-style:outside.
list-style:outside (the default) places the marker ‘outside the principal box’ and thus all bullets will align vertically and the text starts inside the principal box so it also aligns as a text block nicely. Adding margin or padding to the ul simply pushes the whole ul over a bit so that the bullets are now vertically in line with the start of normal text content.
Or from my own (and Tommyy’s) older reference.
2 Likes
You could try move the item content using an amount of padding and then use text-indent to pull the first line out the same amount.
Maybe that would give you the result you want?
Here is a JsFiddle to play with: https://jsfiddle.net/Erik_J/yLcsgnue/
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.