SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    Sweden
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    Sweden
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see, Its working fine now.

    Changed #page to .page

    Thanks alot guys!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •