SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Noobie table css problem

    Hi there, many thanks to anyone who can help.

    I am building a joomla webste from a template so i have limited control over the output. i want to pad these two cells seperately but this wont work.

    <table class=" productdisplay ">
    <tbody>
    <tr>
    <td class="">
    <td class="column_separator">
    </tr></tbody></table>


    .productdisplay table, td
    {
    padding: 0px 10px 10px 0px;
    }

    .column_separator .productdisplay table, td
    {
    padding: 0px 0px 10px 10px;}

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can i refernce the td without a class?

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well you could style the td normally as you have it, but if you don't want the class getting the styles then just override it
    Code:
    #tableIDHere td{background:red;}
    #tableIDHere td.someClass{background:white;/*or other color*/}
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan

    unfortunately the table doesn't have an ID the only thing that seperates the two cells is one has the class "column_separator"

    I thought this would reference just that td
    .column_separator .productdisplay table, td
    {
    padding: 0px 0px 10px 10px;}

    and this would apply to the td with no style

    .productdisplay table, td
    {
    padding: 0px 10px 10px 0px;
    }


    Why does .column_separator .productdisplay table, td
    {padding: 0px 0px 10px 10px;} Style both cells

    Many thanks

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Why does .column_separator .productdisplay table, td
    {padding: 0px 0px 10px 10px;} Style both cells
    You have the .productdisplay class on the table already in the html so there is no need to add table in the selector.

    If your just trying to target the td then remove the comma and the table. The comma is grouping them together.

    How can i refernce the td without a class?
    Try this -

    Code:
     .productdisplay  td {
        padding: 0px 0px 10px 10px;
    }

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    and this would apply to the td with no style

    .productdisplay table, td
    {
    padding: 0px 10px 10px 0px;
    }
    No, what I just posted above would target the generic td.

    Whenever a comma is in between two selectors it groups them together and they both share the styles.

    Have a look through the CSS Reference for more understanding on selector grouping
    http://reference.sitepoint.com/css/selectorgrouping

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Ryan i really appreciate your help with my noobie questions, BTW i do have a book on order i know i need it!!

    This didn't work
    .productdisplay td {
    padding: 0px 0px 10px 10px;
    }

    In the end the solution was (and i'm sure i had already tried this before!!!!)

    .productdisplay .column_separator {
    padding: 0px 0px 10px 10px;
    }

    .productdisplay table, td
    {
    padding: 0px 0px 10px 0px;
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm dont understand why this didn't work?

    .productdisplay .column_separator td {
    padding: 0px 0px 10px 10px;
    }

    and this did

    .productdisplay .column_separator {
    padding: 0px 0px 10px 10px;
    }

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm dont understand why this didn't work?

    .productdisplay .column_separator td {
    padding: 0px 0px 10px 10px;
    }
    Because you are trying to target a td within the td class .column_separator

    You have got things confused with how selectors work.

    and this did

    .productdisplay .column_separator {
    padding: 0px 0px 10px 10px;
    }
    That is the same as saying

    Code:
    table.productdisplay  td.column_separator {
    padding: 0px 0px 10px 10px;
    }
    That is a descendant selector and it is targeting that td class when it is found in that specific table class

    It is all explained here
    http://reference.sitepoint.com/css/selectorgrouping
    http://reference.sitepoint.com/css/combinators

    .

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks very helpfull and very confusing at the same time....i'll have a read


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
  •