Reset CSS for a certain area of the page?

Question

I am working on a CMS. One of its functions is the editing of HTML "chunks" in a WYSIWYG editor that are displayed as individual pages.

I have an area in the CMS where these chunks are previewed.

The chunks rely on a "foundation.css" file that is loaded into the WYSIWYG editor. It does some small resets, defines a default font and text color, and is overall very simple.

The CMS, obviously, comes with a ton of CSS statements, many of which affect general settings like font size, family, color, line-height, paddings and the like.

Naturally, when I try to display a HTML chunk in a CMS page, it looks different from when it is displayed only with the foundation.css stylesheet.

Can anybody think of a way to clean a defined area in a HTML page (say, a DIV) from all previous style definitions? I can't.

• an Iframe displaying the chunk and embedding foundation.css would help, but I fear for the user's workflow when 5-10 IFrames have to be rendered and then adjusted in height via JS once they are loaded. Yuck.

• I have thought about "lifting" all other CSS to a sub-class (i.e. adjusting the CMS' CSS), but that would involve touching a lot of files, some probably PHP source code, and I'd rather not do that.

I don't think this has a solution but you never know.

Answer 1

you could give all of the divs that contain code from the WYSIWYG editor a class, and then reset everything inside of that div.

Answer 2

There are CSS Reset stylesheets available; you could modify those, perhaps?

Answer 3

Adding to what GSto said you can have some style set up like

div.clearCss *
{
  property: value !important 
}

With all pertinent style properties reset. This style should apply to anything under an element with clearCss set as it's class, so you would only need to apply that class to the parent element.

Answer 4

Are you using a specific WYSIWYG editor in CMS? I've found that the Telerik RadEditor will allow you to use specific stylesheets for the actual editing area of the editor. The editor that you are using might also be able to to do that.

Good luck, and hope this helps.

Answer 5

If you take TinyMCE for example, they use also an iframe, I think they had the same problems like you. I use it in my backend and on some pages 4 iframes. I don´t see any performance problems.

With TinyMCE it is possible to compress the functions you need (in PHP, JSP, .NET and Coldfusion), this gives you a great speedboost.

Think twice, bevore you write your own WYSIWYG editor, the others are well tested and have a bunk of very good plugins for nearly every need.