Stopping any CSS Inheritance or Cascading

Discussion in 'CSS' started by NewStick, Feb 18, 2008.

0
  1. #1
    Hey,

    The situation is I'm using PostNuke but want to create my own custom webpages it. In several of the pages I need to use tables to display some data. If I just use straight <TABLE></TABLE> tags with no CSS it gives me a table with no border or anything at all. So I created my own Table CSS:

    
<STYLE TYPE="text/css">
.Test table
{
  border: 1px solid #000000;
}

.Test td 
{
  font: 9px Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
  color: #822123;
  border-right: 1px solid #FFF798;
  border-bottom: 1px solid #FFF798;
  padding: 4px;
  background: #FFFBCB;
}
</STYLE>
    PHP:
    The problem is though it gives me a table, ignoring the border CSS I made and has transparent borders instead about 2 pixels big. So I am assuming it's again just being inherited from the PostNuke CSS. Is there any way I can just clear the style sheets? Or indicate that my particular Test class shouldn't inherit its values at all?

    Thanks for your time.
     
    NewStick, Feb 18, 2008 IP
  2. Ascendancy

    Ascendancy Active Member

    Messages:
    1,721
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    90
    #2
    If you scan the PostNuke CSS style and look for wherever that table is, comment out any border styles it has. Then if you see any changes, you can work from there to try and fix the table properties. My guess would be that it has something to do with specificity, and the PostNuke CSS is more specific than your styles, thus ignoring them.
     
    Ascendancy, Feb 18, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    If the borders on tables are "gone" then it's likely the PostNuke thingie has
    table {
    border-collapse: collapse;
    }

    Which collapses them into themselves and there's nothing. This is usually what we want anyway because you should be able to re-add borders you actually want.

    Since you're doing that and nothing's happening, give your table a name. By name I mean id:

    <table id="superawesometablewithborders"> (call it whatever, just don't start with a number)
    rest of table stuff here
    </table>

    CSS
    #superawesometablewithborders {
    now add your borders;
    }

    The fact that it has a name is likely to override the cascade. Cascades work downwards but they also work with specificity. Most specific things override general things. I'm thinking the Post Nuke thing is really general (table).

    For the td then, use the name as well

    #superawesometablewithborders td {
    blah;
    }
     
    Stomme poes, Feb 19, 2008 IP