Solved

CSS stopping inherit, / CSS resetting

Posted on 2010-08-30
9
580 Views
Last Modified: 2012-05-10
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
Comment
Question by:BToTheAToTheBABA
  • 4
  • 3
  • 2
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33564686
give background:none;
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33564704
i meant this

<style type="text/css">
      #separate td {background:none;}
</style>
0
 

Author Comment

by:BToTheAToTheBABA
ID: 33564722
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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33564758
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
 

Author Comment

by:BToTheAToTheBABA
ID: 33564788
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33564975
'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
 

Author Comment

by:BToTheAToTheBABA
ID: 33569552
any other alternate method to fix this ?
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 33569918
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
 

Author Closing Comment

by:BToTheAToTheBABA
ID: 33684917
There is no 'generic' way, you have to add the details you want to the individual elements.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

839 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