Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Regarding CSS Styles for Lists

On our site, we have an administrative portal that has several forms, log-ins, etc, built in .aspx, that are set up using something about like this format:

<ol>
    <li>Input for Name</li>
    <li>Input for Password</li>
    <li>Button to Log In</li>
    <li>Check-Box to Keep Me Logged In</li>
</ol>

Of course, they didn't want the numbers or bullet-points to show up on the side, so they wrote some CSS like this:

.inside fieldset ol li {
list-style: none;
margin-left: 0;
}

The problem now, is that we have a lot of informational pages in there now, that contain numbered lists, and because of the CSS styling, they do not display the numbers.

I have tried putting this code directly onto one of the pages:

<style>
.wwu-inside fieldset ol li {
list-style: decimal; !important
margin-left: 0;
}
</style>

But apparently, the numbers still don't show up...

There are more of those forms than there are informational pages, and to root through the whole thing to find and change individual styling would be far too tedious a task, so I was wondering if anyone could suggest a solution to this.

I have also tried creating a new class, like this:

.numbered-list {
list-style-type: decimal;
}

But that doesn't seem to work either.

(Furthermore, do I apply that class to the < ol > tags, or to each individual < li> tag? I assumed the < ol > and applied it there, as I assumed it would carry down, but it doesn't look like it has.)

Any assistance or insight would be greatly appreciated. I really feel like I should be more familiar with CSS than I am, having been at it this long. :\

Thanks!

1 Answer

Your !important is outside the css command (after the ';') try:

<style>
.wwu-inside fieldset ol li {
list-style: decimal !important;
margin-left: 0;
}
</style>

If this is not working, your 'margin-left' is set to 0, so your decimal might not show up because it's hidden outside the ol. . Try making the margin-left something like 20px to see if the decimal is hidden outside its container.

Thanks! :)