Overriding a CSS style

Question

In a global style sheet used across all of our pages sits the following line:

ul { margin: 0; }
li { list-style-type: none; padding-bottom: 3px; }

Therefore, any ul's inside my pages render with no discs next to li's.

However, in special cases, I need to display the disc next to a li.

I have a div with the class "blog-post" and though that the following would do the trick for me.

.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }

However this isn't doing the trick.

So with the following snippet of HTML

<ul>
  <li>Testing</li>
</ul>
<ol>
  <li>Testing</li>
</ol>

Results with:

Testing
1. Testing

Still no disc in the li's nested in the ul's. Thoughts on how I can get them there? My CSS-fu is weak....

Answer 1

Change this:

.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }

to this:

.blog_body ul li { list-style-type: disc; }
.blog_body ol li { list-style-type: decimal; }

Answer 2

!important is not necessary because class-specific styles override global styles already. The problem is because in the global style you set the margin to zero. The style type is being rendered correctly, but you just can't see it. This should work for you:

.blog_body ul 
{
    list-style-type: disc; 
    margin: 1em;
}