Ordered List Question

[Alan Vende]

I'm not sure where to put this, I apologize.

I'm working with a piece of code to style it a bit:

#ppstaffdialog > div ul.pp-other-staff-list {
   padding-left: 30px;
}
I want to change it to an ordered list. I know the "normal" ordered list CSS is

<ol>
   <li></li>
</ol>
But, for some reason, when I put ol.pp-other-staff-list, it doesn't render. It doesn't render when I just put the above without a class, either.

I always thought that <ol> would populate an ordered list regardless of anything else, unless you dictate some CSS with it, but nothing is populating, for some reason--it's just showing the words:



I'm so confused. I've been working on this all afternoon. I'm the definition of insanity, at the moment: attempting the same thing, expecting different results..

Thanks for any help you can provide!

[Kami]

the code you put in code tags say ul but the content youre typing after says ol... double check to make sure you didnt mess that up.

also is that ol in a div with the correct ID and class too? thats what you specified.

[Alan Vende]

Mar 20, 2018 17:20:20 GMT -8 Kami said:

the code you put in code tags say ul but the content youre typing after says ol... double check to make sure you didnt mess that up.

also is that ol in a div with the correct ID and class too? thats what you specified.

Oops, I forgot to change that when I went in and did other edits, but it should have said ol.... That didn't work, either. I attempted that.

At the moment, it's:

#ppstaffdialog > div ol.pp-other-staff-ordered-list {
   padding-left: 30px;
}
I couldn't find any list-style that allowed it to be numeric--I've looked--it was roman numerals, mostly, not numbered. The above worked with the uls that I have, so I don't understand how it wouldn't work with the ols, minus the fact that the list-style of list-style: outside disc; wouldn't apply as it would in an unordered list.

[Kami]

the way youve structured your css it is asking for the ol with that class name to be inside of a div in a parent container with that specific ID. did you make sure this was the case?

also remember that IDs are unique. you can have only 1 of any given ID on a page at a time. since youre copying this from something else and are just changing the list order type, make sure youve also changed the ID

[Alan Vende]

Mar 20, 2018 17:39:10 GMT -8 Kami said:

the way youve structured your css it is asking for the ol with that class name to be inside of a div in a parent container with that specific ID. did you make sure this was the case?

also remember that IDs are unique. you can have only 1 of any given ID on a page at a time. since youre copying this from something else and are just changing the list order type, make sure youve also changed the ID

The ID is of the dialog box in which the ol is housed, and there's only one of those on the page at a time. I use the same with the ul, as I think I've shown, and it works correctly.

I've attempted it with just targeting the ol itself, but that didn't work either.

This stumps me because the ul works correctly, but the ol does not--I structured it this way because that's how the ul is structured also, so I thought that I'd be able to target them both the same way--I guess that's not the case?

[Kami]

without a link i dont think id be able to dissect this one, but im on mobile and about to take a nap so you might have to wait for someone else to have a look.

i cant think of a reason why the ol wouldnt accept the class name and style since class names do not need to be unique.

[Alan Vende]

Whoops, I thought I had given a link in my initial post. My bad: [a href="http://lousplugins.proboards.com[/a]link[/a].

I cannot think of any reason either, which is why I posted here. I knew that IDs had to be unique, but class names do not... which is what got me confused.

Thanks for your help, Kami. <3

[Scott]

Alan Vende ,
Try this:

#ppstaffdialog > div ol.pp-other-staff-ordered-list {
   padding-left: 30px;
   list-style-position: inside;
}

It's possible the ordered lists are being rendered but just with the numbers outside of the viewable area.



Edit:

You may also need to add this:

list-style-type: decimal;

IIRC when I was working on the Rules for this forum, all my ul's and ol's worked best when I defined the type and position rather then try to rely on the browser default.

[Alan Vende]

Sorry, Scott . I was away from my computer the past few days, as the Internet wasn't very reliable. I just attempted this fix, and it worked--thank you!

Now to figure out why a display: block; element isn't rendering properly.

Before I left, I was trying to do two things at once: the topic of this thread, and move a div into the middle of the dialog. I put

   display: block;
   margin-left: auto;
   margin-right: auto;
}
which normally works, but isn't moving it to the center of the div.

All of the code is:

.pp-colorkey-table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   display: block;
   margin-left: auto;
   margin-right: auto;
}
It just confuses me, as I know it's coded correctly. I'm posting it here because, at first, I didn't know if these were mutually exclusive (in terms of them making each other not work,) but now that the first issue is fixed, I'm not so sure these two are related.  The element that I'm attempting to center is at the very bottom there, the Color Key.

[Scott]

Alan Vende ,
Try removing the display:block;

.pp-colorkey-table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   margin-left: auto;
   margin-right: auto;
}

[Alan Vende]

I tried it with that CSS before, but it still wasn't centered, which is why I added the display: block;, but it still didn't center. Now, when I copy the CSS you gave me above, it worked. I've no clue, but I'm not going to question it.

Thanks for the help, Scott . It is greatly appreciated!

[Scott]

Alan Vende , I agree, when things work, don't question just be happy!

Glad I was able to help.

[Alan Vende]

I was jumping up and down like a kid in a candy store; that's how happy I am!

Thank you again!