Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overriding a CSS style

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....

like image 644
mwilliams Avatar asked Mar 23 '09 18:03

mwilliams


2 Answers

!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;
}
like image 107
Scott Avatar answered Sep 21 '22 14:09

Scott


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; }
like image 43
Ron DeVera Avatar answered Sep 19 '22 14:09

Ron DeVera