CSS overrider problem??

Question

Hello,I found a lot of posts about css override,but still need to ask. Have this problem.In my wordpress theme links,buttons,p,div,... elements are defined,but I need to in my div box override all previous defined values,just to clear it.How can I do that,here is the structure of my div box

<div class="nBox">
    <div id="skr" class="newsBox scrollable">
        <div class="items">

        <div class="this-one">

         I here load programmaticly text from Tinymce editor,
         with tags and his own defined styles and values.

        </div>

Is there a way to clear previous defined style,so in my div.this-one everythings works fine.

Answer 1

Just make a selector that has higher weight and it will override previous styles - make sure you really override all previously set rules.

.nBox .this-one {
padding:0;
margin:0;
....
}

You could also override it with ID. ID has a higher weight than class - but note ID must be unique.

Here you can read a bit about it: http://www.webteacher.ws/2008/05/19/tip-calculate-the-specificity-of-css-selectors/

Answer 2

TinyMCE live in an iframe, which shouldn't be effected by styles on the page. If you absolutely need to do this though, I would look for a css reset stylesheet, and then put div.items<space> before each rule in the stylesheet (and remove body level rules of course)

Answer 3

I don't know of any method to just say style: none that would negate any and every possible style rule that an element has inherited. But since most things that you would want to wipe are going to be related to fonts/text, color, or margins/padding, you could take care of most issues with a few simple rules:

.this-one {
   margin: 0; !important
   padding: 0;!important
   font: none;!important
   background: none;!important
}

Then set the values you do want.