How can I remove part of a webpage from the normal flow of styles and css rules without an iframe?

Question

Is there anyway to make a chunk of a page ignore all current CSS rules and stylesheets, the way that conten in an iframe ignores the style rules of the parent?

The context for this is that I have a template editor wherein the user has a live preview of the edits they are making. The styles of the management page conflict with the styles of the template. Changing the style of either to accomodate the other is not an option.

Currently, I am making this work by loading in the template from within an iframe, but I would like to load it directly onto the page if it is an option.

Bearing in mind the single constraint of not changing my styles, any solution, (or step in the right direction), would be greatly appreciated.

Answer 1

Create a style for a div and then apply a reset for all elements that are children of that div. There is a reset script here:

http://meyerweb.com/eric/tools/css/reset/

All of the styles in your reset will need to have that class as the parent, like this:

.editor-reset html, .editor-reset body, etc {
    /* resets in here */
}

EDIT: As an aside, this is a lot easier with LESS, http://lesscss.org/ , because you can use css inheritance to build the parent / child relationship between the parent style and the reset styles.

Also, you may need to use !important to override some styles.