?
Solved

CSS Inheritance

Posted on 2008-10-28
9
Medium Priority
?
360 Views
Last Modified: 2012-05-05
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
Comment
Question by:Nugs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 22825237
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
 
LVL 2

Author Comment

by:Nugs
ID: 22825280
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
 
LVL 2

Author Comment

by:Nugs
ID: 22825340
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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
LVL 2

Author Comment

by:Nugs
ID: 22825395
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
 
LVL 30

Accepted Solution

by:
Steggs earned 2000 total points
ID: 22825452
.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
 
LVL 2

Author Comment

by:Nugs
ID: 22825707
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
 
LVL 30

Expert Comment

by:Steggs
ID: 22826078
Do you need any more help with this?
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22827428
"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
 
LVL 2

Author Closing Comment

by:Nugs
ID: 31524691
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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question