How to reset css in middle of html document ?

Question

Hi, I wonder if there are any possibility to reset css in middle of page? I have main style, but in one area I would like to use style from tinyMCE generated source. So in tinyMCE source are elements which in editor looks like default browsers style (or like user wants), but in other pages uses style from my main css and from it self inline style. So I get mix of both ant it looks crappy. And I have no idea how to reset main style,.. without iframes.

Thanks

Answer 1

You mean, have a set of CSS rules to apply to the top part of a page, and a reset set of rules apply to the rest? No way, can't be done, sorry.

My approach to stuff like this is usually to embed the problematic content in a wrapper <div class='wysiwyg_html'> and then to set specific styling instructions for that content:

.wysiwyg_html p { display: inline }
.wysiwyg_html a { text-decoration: underline }
.... and so on

If you want, you can apply a whole reset stylesheet to everything inside wysiwyg_html that way.

Answer 2

thats pretty easy, i will show this with the "poorman's" reset but the others (eric mayer's ect.) works the same way:

* {
padding: 0;
margin: 0;
}

div {
 padding: 50px;
}

#content *{
 padding: 0;
 margin: 0;
}

now your div inside the #content should have the reseted padding: 0; again, because an id selector wins over an element selector, so the only thing you need to make sure is that your secound reset has a selector that outweighs the others (but dont use important!).