Solved

CSS stopping inherit, / CSS resetting

Posted on 2010-08-30
9
582 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
[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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

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.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

695 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