Li left-padding inside table

HTML & CSS
1

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… ?

#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;
    [B]padding-left: 15px;[/B]
    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>
2

It’s being overridden by this line:

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

3

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. :slight_smile: ) This declaration

#page li {[COLOR="#FF0000"]padding: 3px[/COLOR]; line-height: 140%; }

is over-riding

.tableHomeTopList li
{
    border: 1px solid blue;
    [COLOR="#FF0000"]padding-left: 15px[/COLOR];
    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 [URL=“http://reference.sitepoint.com/css/specificity”]link to the relevant section of the SitePoint reference.

Hope that helps. :slight_smile:

4

I see, Its working fine now.

Changed #page to .page

Thanks alot guys!