• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 592
  • Last Modified:

CSS stopping inherit, / CSS resetting

I have a global css definition like this

td {
     background: none repeat scroll 0 0 transparent;
}


Now I dont want to inherit these properties only inside a div tag with id="separate"
<style type="text/css">
      #separate td {inherit:none; background:''}
</style>
<div id="separate">
    ...........
    .....<td >......
    .....<td background='image.gif'>.....
    ...........
    ...........
    .....<td>.....
    ...........
</div>



As you know
inherit:none;
and
background:''   (emptyfying)
Does not exists.

How to do this ?

0
BToTheAToTheBABA
Asked:
BToTheAToTheBABA
  • 4
  • 3
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
give background:none;
0
 
Gurvinder Pal SinghCommented:
i meant this

<style type="text/css">
      #separate td {background:none;}
</style>
0
 
BToTheAToTheBABAAuthor Commented:
sorry, i cant because some td will have background & some will not.


Also If I use something like this
#separate td
{
   background:white;
}


in runtime then It automatically becomes
#separate td
{
   background:white repeat scroll 0 0 transparent;
}
instead of
   background: none repeat scroll 0 0 transparent;
from global declaration.




Basically I need to DISABLE inheritance INSTEAD of OVERRIDING with new syle.


0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Gurvinder Pal SinghCommented:
this is not inheritance,
inheritance is from parent element to child element, and background properties are not inherited anyways

Give
#separate
{
    background: none !important;
}


0
 
BToTheAToTheBABAAuthor Commented:
If I use this
#separate td
{
   background:none;
}

then browser reads it as (copied from firebug)
#separate td
{
   background:none repeat scroll 0 0 transparent;
}


as you can see the Global declaration is same as this
td
{
   background:none repeat scroll 0 0 transparent;
}

this means new property inside #separate td is overridden & others are automatically inherited.

0
 
Dave BaldwinFixer of ProblemsCommented:
'td' and 'tables' don't inherit much of anything anyway.  It's an oddity that all the browsers exhibit in tests that I've done.  I think it comes from some historical context and is against the W3 standard but they do it anyway.
0
 
BToTheAToTheBABAAuthor Commented:
any other alternate method to fix this ?
0
 
Dave BaldwinFixer of ProblemsCommented:
There is no 'generic' way, you have to add the details you want to the individual elements.  Remember that the last declaration for a particular style item and element is the one that takes effect.  If you use a CSS reset, it needs to be the very first thing in your CSS code.  Then come the general categories and then the specific details.  After all that come the inline styles which can override what came before.  A partial exception is that table elements need to be specifically styled because they don't inherit much.
0
 
BToTheAToTheBABAAuthor Commented:
There is no 'generic' way, you have to add the details you want to the individual elements.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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