HowTo force element not to inhereit CSS? 1

[Sheco]

Is there a CSS keyword that I can use to stop an element from inheriting the CSS of its parent element?

Given the example below where one HTML Table nested inside another:

<style>
 .Chart1 {
  border:1px solid #666666; 
  border-bottom:2px solid #666666;  
  }

 .Chart1 TD {
  vertical-align:middle; 
  text-align:center; 
  }
</style>


<table class="Chart1">
  <tr>
    <td>
      Here is some stuff
    </td>
  </tr>
  <tr>
    <td>[red]
      <table>
        <tr>
          <td>
            This TD in the nested table will inherit style 
            from the parent table.  How to stop it?
          </td>
        </tr>
      </table>[/red]
    </td>
  </tr>
</table>

Is there a simple keyword that can be used to force the sub-table to ignore the style of the outer table and use the browser default instead?

My current solution is to create an entirely new CSS class and sub elements to negate the outer style but this seems to be quite clunky so I suspect there is a better way to do it.

 

[BillyRayPreachersSon]

If only IE 6 supported the child selector (>), you could have modified your CSS rule to be:

.Chart1 > tbody > tr > td

But it doesn't, and so assuming you want to support IE6, you'll have to override nested tables with a new class & rule... So give your inner table a class, and then define a new rule, something like:

.Chart1 table td {

Then re-define the styles you want for nested tables cells.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Sheco]

So my current approach of using an explicitly defined sub class to negate the parent class is the only method to prevent the "cascade" effect?

 

[Sheco]

IE 6 is probably the most important browser for me in this situation so solutions that do not support IE 6 are no good for this problem.

 

[BillyRayPreachersSon]

Yup - sounds like you're going to have to override for levels further down.

I find I have to do that for nested UL/LI blocks in a lot of navigation I write... it almost doubles the size of the nav CSS, but until IE6 dies out and I can safely use >, there's not a huge amount of choice

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]