CODEWITHSUNDEEP
htmlcsshtml-lists
amphibient
amphibient

Reputation: 31212

LI does not abide by ancestor's padding

My LI does not abide by an ancestor's padding setting:

enter image description here

Here is the HTML:

<div class="expUnit">
    <h4>Company</h4>
    <p>Lorem ipsum.</p>
    <ul class="project-list">
        <li>Line 1</li>
        <li>Line 2</li>
    </ul>
</div>

CSS:

.expUnit 
{
    line-height:17px;
    color: #444;
    border-left:1px solid #fadc66;
    padding-left:15px;
}

.expUnit .project-list li
{
    list-style-type: circle;
}

However in a fiddle, it does indent it. What could be the reason I don't get and alignment of bullets with 'Lorem ipsum'?

Upvotes: 0

Views: 52

Answers (1)

somecallmejosh
somecallmejosh

Reputation: 1425

Looks like you're applying the padding to your parent container, and not your project-list.

Also, since you're using reset.css, you'll need to override the ul{padding:0} with a more specific declaration.

Try:

.expUnit ul
  {
    padding-left:15px;
    list-style-type: circle;
  }

Also, double check that your CSS file is being called after reset.css

Upvotes: 1

Related Questions