Solved

CSS stopping inherit, / CSS resetting

Posted on 2010-08-30
9
578 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Full Screen problem when auto scale IFRAME 2 65
Centered Image 2 23
remove background quote mark from widget 6 24
bootstrap footer centering and expand problems 7 29
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

867 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now