Solved

CSS Inheritance

Posted on 2008-10-28
9
353 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
  • 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 30

Accepted Solution

by:
Steggs earned 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

760 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now