Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 363
  • Last Modified:

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

0
Nugs
Asked:
Nugs
  • 5
  • 3
1 Solution
 
Mark StegglesWeb DeveloperCommented:
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
0
 
NugsAuthor Commented:
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
0
 
NugsAuthor Commented:
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
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
NugsAuthor Commented:
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

0
 
Mark StegglesWeb DeveloperCommented:
.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;
     font-weight:normal
}

Providing the styles are in this order, it should work
0
 
NugsAuthor Commented:
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
0
 
Mark StegglesWeb DeveloperCommented:
Do you need any more help with this?
0
 
scrathcyboyCommented:
"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.
0
 
NugsAuthor Commented:
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.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now