li left-padding inside table

I have no idea why, but i can't apply left-padding to li element inside a table --> .tableHomeTopList li

The "border" and "padding-bottom" properties are working fine... ?

Code:

---

#page
{
  padding: 10px 0 0 0;
  clear: both;
  width: 972px;
  margin: 0 auto;
  min-height: 500px;
}

#page ul { margin: 0 0 15px 20px; list-style: disc;}
#page li {padding: 3px; line-height: 140%; }

.tableHomeTopList
{
  border-collapse: collapse;
  width: 700px;
}

.tableHomeTopList ul
{
    margin: 4px 0;
}

.tableHomeTopList li
{
    border: 1px solid blue;
    padding-left: 15px;
    list-style: none;
    background: #fff url(/img/checkMark.png) no-repeat;
    background-position: 0px 0px;
    padding-bottom: 5px;
}
<div id ="page">
 <table class="tableHomeTopList">
      <tr>
        <td>
        <ul>
        <li>BlaBla</li>
        <li>BlaBla</li>
        </ul>
        </td>
      </tr>
  </table>
</div>

---

It's being overridden by this line:

Code:

---

#page li {padding: 3px; line-height: 140%; }

---

They are both targeting the <li>, but #page is more specific than .tableHomeTopList (an ID is always more specific than any number of classes or plain elements), and so that wins out and takes precedence.

I think you're running into a problem with CSS specificity rules. (Edit - now I'm sure, because Stevie just beat me to it with the same reply. :) ) This declaration

Code:

---

#page li {padding: 3px; line-height: 140%; }

---

is over-riding

Code:

---

.tableHomeTopList li
{
    border: 1px solid blue;
    padding-left: 15px;
    list-style: none;
    background: #fff url(/img/checkMark.png) no-repeat;
    background-position: 0px 0px;
    padding-bottom: 5px;
}

---

A declaration containing an id is considered more specific than a declaration containing a class.

There was a recent thread about this, which included a link to the relevant section of the SitePoint reference.

Hope that helps. :)

I see, Its working fine now.

Changed #page to .page

Thanks alot guys!