SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot spybreak's Avatar
    Join Date
    Apr 2003
    Location
    Germany
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing the background-color of a <td>

    I have this code. Right now, the background-color of the <td> is red. How can I make it green, i.e. remove the <td>'s background color (red) so that the <tr>'s background-color (green) shows through? "background-color: none" doesn't work.

    Sorry for my bad English.

    Code:
    <style type="text/css">
    
      tr { background-color: green; }
      td { background-color: red; }
    
    </style>
    
    
    <table>
    
    <tr>
     <td style="background-color: none;">This background-color should be green.</td>
    </tr>
    
    
    </table>
    I also tried "background-color: transparent", but then it's white. I want it to be green, i.e. the <tr>'s color.
    "background-color: inherit" doesn't seem to work either.

    Can anyone help?

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    If you mean the whole page is suppossed to be green, than I don't know, but if you mean the small strip behind the text then just delete this:

    { background-color: red; }

    I hope that is what you wanted, if not sorry..

    Later
    Johnny

  3. #3
    SitePoint Zealot spybreak's Avatar
    Join Date
    Apr 2003
    Location
    Germany
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not quite what I wanted but thanks.

    I need to remove the red so that the green shows through without removing the line:
    td { background-color: red; }

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    background-color:transparent
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  6. #6
    SitePoint Zealot spybreak's Avatar
    Join Date
    Apr 2003
    Location
    Germany
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, that's not what I mean Johnny.

    let me try to explain.

    i thought css worked like this (in this case):

    a <tr> is defined with a green background
    on top of it a <td> with a red background.

    let's think of it as two layers, like in photoshop: green layer on bottom, red layer on top.

    can i just remove the red layer when it's on top alredy?


    --
    Jeff: background-color:transparent doesn't work. It's somehow a fake transparent I get in IE:
    in theory a <td> defined as transparent should show what's underneath it (the green <tr>). However, it is completely transparent, i.e. the background of the page shows through.

  7. #7
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm not sure a TR is supposed to be able to have a background-image, so I think IE may be doing it correctly.

    I'd set the background-color for all the cells in the row to green, and then set the ones you want red to be red.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  8. #8
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A td doesn't sit on top of a tr, it's a cell within the row (tr), although for the purposes of background inheritence it can be considered that way.

    Create a separate class for the ones that you wish to be green, alternatively set the table background to green and the cell to red. BTW - have you tried background: inherit; ?

  9. #9
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or if you are using something like .row for the row (<tr class="row">) change it to
    Code:
    .row td {
    }
    or something...
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  10. #10
    SitePoint Member coolfactor's Avatar
    Join Date
    Sep 2003
    Location
    Campbell River, BC
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hurricane.uk is correct. A <tr> doesn't actually have dimension, so it doesn't display anything itself. When you assign a background color to it, it's child element <td> inherits that background color. Applying a background color to the <td> changes the color.

  11. #11
    SitePoint Zealot spybreak's Avatar
    Join Date
    Apr 2003
    Location
    Germany
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok then. I wasnt sure whether a <tr> had it's own background or if, when one assigs a background color to a <tr>, the <td> automatically inherit it.

    Now I know Thanks

    Gonna work with that in the future.


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
  •