#1
  1. No Profile Picture
    UberGeek
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Posts
    67
    Rep Power
    14

    Question CSS/IE6: Setting width of DIV inside first TD of table rows


    I'm trying to use selectors and CSS inheritance to define the width of a DIV element (or the TD itself) of the very first TD in every table row. I have the following:

    TABLE.list TR TD:first-child DIV
    {
    width:50%;
    }

    This does nothing (neither in IE6 nor NN6). Can anyone offer a solution?

    Thanks,
    N8.
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    21
    Rep Power
    0
    Try doing it inside Dreamweaver ... might be easier
  4. #3
  5. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    I believe you'd need to use 'first-child' like this:

    TABLE.list TR TD:first-child {....}

    Irrelevent, anyway, except for NS6-intra as this pseudo-class isn't supported yet for MSIE. I think. Classes might do it:
    Code:
    <html> 
    <head> 
    <title>untitled</title> 
    <style type="text/css"> 
    
    body {
    text-align: center;
    }
    
    table {
    width: 80%;
    border: 3px darkred double;
    }
    
    td {
    height: 100px;
    background: black;
    }
    
    
    td.first {
    width: 50%;
    height: 100px;
    font: 200 18px monospace;
    padding-left: 3px;
    background: tomato;
    }
    
    </style> 
    </head> 
    <body> 
    <table>
    <tr>
    <td class="first">class="first"</td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    <td class="first">class="first"</td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    </table>
    </body> 
    </html>
    http://www.blooberry.com/indexdot/cs...firstchild.htm
  6. #4
  7. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    If you're going to use the inefficient " " selected instead of the ">" selector, might as well go:

    table.list td:first-child div

    I'd personally go like:

    table.list > tbody > tr > td:first-child > div

    Because the > has better performance than " " (only searches one level down), though IE of course being the crappy browser that it is does not support >.
    NS6, NS7, Galeon, K-meleon, Beonex, and anything Mozilla-based all do, as well as Opera 6 and probably the latest Konqueror. But naturally IE doesn't.
    Jason Contact Me
    Super moderator @ CodingForums

IMN logo majestic logo threadwatch logo seochat tools logo