?
Solved

CSS stopping inherit, / CSS resetting

Posted on 2010-08-30
9
Medium Priority
?
585 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:Gurvinder Pal Singh
ID: 33564686
give background:none;
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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
Industry Leaders: 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:Gurvinder Pal Singh
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 84

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 84

Accepted Solution

by:
Dave Baldwin earned 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

650 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