asked on

CSS Inheritance

I have an inheritance problem. We are in the process on integrating our website code into a CMS system and this styling problme came up after we did that. I have not had this problem before and not much has changed in terms of the page rendering... So little confused why this is happening now... In any case, here it is...

I have the following styles:

.contentcell
{
      border: 1px solid #B0C4C0;
      background-color: #e7f1fa;
      height: 100%;
      padding-bottom: 10px;
      line-height: 17px;
}
.contentcell a:link
{
      color: #0099FF;
      text-decoration: none;
      font-weight: bold;
}
.contentcell a:visited
{
      color: #0099FF;
      text-decoration: none;
      font-weight: bold;
}
.contentcell a:active
{
      color: #0099FF;
      text-decoration: none;
      font-weight: bold;
}
.contentcell a:hover
{
      color: #FB8F01;
      text-decoration: none;
      font-weight: bold;
}

.outertab_top_on
{
      background-color: #C9E4F2;
      font-weight: bold;
}
.outertab_top_off
{
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #6AB4D9;
      background-color: #FFFFFF;
}

.outertab_top_off, .outertab_top_on
{
      border-top-width: 1px;
      border-left-width: 1px;
      border-top-style: solid;
      border-left-style: solid;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #444444;
      height: 20px;
      white-space: nowrap;
      padding-left: 5px;
}

.outertab_top_off a:link, .outertab_top_on a:link
{
      text-decoration: none;
      color: #444444;
}
.outertab_top_off a:visited, .outertab_top_on a:visited
{
      text-decoration: none;
      color: #444444;
}
.outertab_top_off a:active, .outertab_top_on a:active
{
      color: #0066CC;
}
.outertab_top_off a:hover, .outertab_top_on a:hover
{
      text-decoration: none;
      color: #0066CC;
}

The table cell using the outertab_top_on style is inheriting the contetncell a:link style and ignoring its own a:link style... How can i avoid this??????

Nugs

<table width="400" height="400" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="contentcell"><p>Some content might go here and the content might have a link that needs to display witht he <a href="link">contentcell a style </a></p>
      <table width="200" height="200" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="outertab_top_on"><a href="X">Supposed to use outertab_top_on a style... but is inheriting from contentcell style </a></td>
      </tr>
    </table></td>
  </tr>
</table>

Open in new window

Mark Steggles

Hello,

You cannot undo css inheritance... you can only cancel it out with a more relevant style. Is the font-weight:bold the problem?

.contentcell a:link
{
color: #0099FF;
text-decoration: none;
font-weight: bold;
}

.outertab_top_off a:link, .outertab_top_on a:link
{
text-decoration: none;
color: #444444;
}

you can increase the 'power' of the outer_tab_on style by doing this:

.contentcell .outertab_top_on a:link {}

Hope this helps

Nugs

ASKER

Well as you can see contentcell has the following styles:

      color
      text-decoration
      font-weight

If overwriting or canceling the styles is all i can do then i will need to do this for all of the above in the outertab_top_on styles...

But to answer your question more clearly. Yes font-weight is the problem and color...

Nugs

Nugs

ASKER

Steggs,

What you suggested did work.. modifying the styles like this is a solution:

.contentcell .outertab_top_off a:link, .contentcell .outertab_top_on a:link
{
      text-decoration: none;
      color: #444444;
      font-weight: normal;
}
.contentcell .outertab_top_off a:visited, .contentcell .outertab_top_on a:visited
{
      text-decoration: none;
      color: #444444;
      font-weight: normal;
}
.contentcell .outertab_top_off a:active, .contentcell .outertab_top_on a:active
{
      text-decoration: none;
      color: #0066CC;
      font-weight: normal;
}
.contentcell .outertab_top_off a:hover, .contentcell .outertab_top_on a:hover
{
      text-decoration: none;
      color: #0066CC;
      font-weight: normal;
}

Although not a very elegant one. Since i am using a CMS system and these styles are for a control that can be placed on the page anywhere... there may be a scenario where the control itself is NOT inside the table that has the contentcell style... This in turn will break the above styles.

I was hoping for a solution where .contentcell can be left out of the other styles...

Nugs

Nugs

ASKER

No style would be applied to the table residing outside the contentcell table

<table width="400" height="400" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="contentcell"><p>Some content might go here and the content might have a link that needs to display witht he <a href="link">contentcell a style </a></p>
      <table width="200" height="200" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="outertab_top_on"><a href="X">Supposed to use outertab_top_on a style... but is inheriting from contentcell style </a></td>
      </tr>
    </table></td>
  </tr>
</table>
 
 
<br>
 
 
<table width="200" height="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="outertab_top_on"><a href="X">What happens if at table is outside the content cell...</a></td>
  </tr>
</table>

Open in new window

ASKER CERTIFIED SOLUTION

Mark Steggles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Nugs

ASKER

Well actually i have about 5 separate css files that hold these along with a number of other styles...

But the order in which they load depends on which overrides what... That's good to know...

Nugs

Mark Steggles

Do you need any more help with this?

scrathcyboy

"The table cell using the outertab_top_on style is inheriting the contetncell a:link style and ignoring its own a:link style... How can i avoid this??????"

This will happen in CMSs. You have to edit the stylesheet that is linked to the Template and not add any, in other words, put your CSS into the main stylesheet linked to by the template, removing any conflicting CSS in the style sheet that is already there.

Nugs

ASKER

Sorry Steggs, i forgot about this question... The order of the loading of the styles was my issue here, thanks for the help and sorry again for the delay.