#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    6
    Rep Power
    0

    css: inheritance of values


    Can styles be nested to inherit a common value?

    For example can two styles with a shared color value be written to inherit that color valuer like so:

    Instead of writing:

    .masthead_pinstripes {
    border-top: medium solid Red;
    border-bottom: medium solid Red;
    }

    .leftnav_rightsidestripe{
    border-right: none Red;
    border-left: 1px solid Red;
    }


    Can the following be done:

    .ColorVal{
    color: Red;

    .masthead_pinstripes {
    border-top: medium solid Red;
    border-bottom: medium solid Red;
    }

    .leftnav_rightsidestripe{
    border-right: none Red;
    border-left: 1px solid Red;
    }

    }



    The general idea being that .masthead_pinstripes and leftnav_rightsidestripe would inherit the border colors from somewhere else [ a different style or from a third style they are nested within?

    Your help is greatly appreciated as I can't seem to figure this out and am totally confused on how inheritance would work.
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    You can work this out a couple of ways. If only one element belongs to masthead_pinstripes and leftnav_rightsidestripe, you can use ids instead of classes and then also asign them a class.
    Code:
    <div id="masthead_pinstripes" class="colorVal"></div>
    <div id="leftnav_rightsidestripe" class="colorVal"></div>
    Code:
    .colorVal { }
    #masthead_pinstripes { }
    #leftnav_rightsidestripe { }
    If that doesn't fit your situation, you can use "inherit" for a color value. I'm not sure how things are setup exactly for you, so I'll use a basic example instead.
    Code:
    body
      {
      background-color: white;
      color: black;
      }
    .foo
      {
      background-color: silver;
      color: inherit;
      }
    In the above, an element with class "foo" will have a silver background and the text color will be inherited from the parent element, the body, so it will be black.
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    6
    Rep Power
    0

    partially worked, need advice/correction


    I set up a test css and htm file as follows:

    CSS:
    .colorVal{
    color: Navy;
    }
    #leftnav_rightsidestripe{
    border-right: none ;
    border-left: 3px solid ;
    }
    #masthead_pinstripes {
    border-top: medium solid ;
    border-bottom: medium solid ;
    }


    HTML:

    <div id="masthead_pinstripes" class="colorVal"><table width="75%" border="0" align="center">
    <tr>
    <td>&nbsp;</td>
    <td>leftnav_rightsidestripe</td>
    <td id="leftnav_rightsidestripe" class="colorVal">&nbsp;</td>
    </tr>
    <tr>
    <td height="21">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table></div>

    This seems to work as the masthead_pinstripes work perfectly, however the leftnav_rightsidestripe shows the border, but it is not inheriting the color. Am I applying the class /id correctly to the tables column? FYI I also tried using:

    <div id="leftnav_rightsidestripe" class="colorVal"><td>&nbsp;</td></div>

    anybody, please advise how to correct this.
  6. #4
  7. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    You're assigning the color of the text in your colorVal class, not the color of the border. Try this instead:
    Code:
    .colorVal
      {
      border-color: navy;
      }
    #leftnav_rightsidestripe
      {
      border-right: none ;
      border-left: 3px solid inherit;
      /* or */
      border-left-width: 3px;
      border-left-style: solid;
      }
    #masthead_pinstripes
      {
      border-top: medium solid inherit;
      border-bottom: medium solid inherit;
      /* or */
      border-top-width: medium;
      border-top-style: solid;
      border-bottom-width: medium;
      border-bottom-style: solid;
      }
    It could also look like this:
    Code:
    .colorVal
      {
      border-style: solid;
      border-color: navy;
      }
    #leftnav_rightsidestripe
      {
      border-left-width: 3px;
      }
    #masthead_pinstripes
      {
    border-top-width: medium;
    border-bottom-width: medium;
      }
    Not exactly sure how all that would work out. You may get more borders than you want, which you would have to cancel.

    I also recommend getting away from table layouts. You're already using divs so go ahead and drop the tables. If you're not comfortable with that, then just apply the CSS to the tables and don't wrap them in divs.
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.

IMN logo majestic logo threadwatch logo seochat tools logo