Is there a way to "sandbox" an HTML block away from its page's CSS without using iframes?

Question

Is it possible, for example, to have a div that completely ignores CSS rules, no matter what classes and ids it contains?

Pained

Answer 1

Nope, this is (sadly) not possible without an iframe.

You would have to reset every existing CSS rule for that div like so:

div.sandbox
 {
    font-size: ....
    font-family: ..........
    margin: .........
    padding: .........
    line-height: .........
  }

while difficult and never 100% reliable, it might be possible to achieve a usable result this way. You could look at one of the "reset stylesheets" like Eric Meyer's to get a list of important properties to reset; here is what claims to be a complete list of CSS 2.1 properties - excluding CSS 3 and vendor specific ones, which you would have to take into consideration as well.

Providers of 3rd party widgets often hard-code their "reset CSS" as inline CSS inside the HTML element to override any !important rules that threaten to override the sandbox class's rules.

Saw

That wouldn't work very well, unfortunately, as the contents would be an HTML free-for-all from a WYSIWYG box. Oh well. Guess I'll have to use the dreaded iframes. – Pained

Answer 2

May give results:

div {
 all:unset !important;
 clear:both !important;
 margin: 0 !important
}

Inline style will overide any css styles. This also mean that any styles set by javascript will overide any css rules, just because javascript is setting styles on a inline manner.

As well any styles between style tag directly on the html part will overide the styles set on the css file. On any case inlines style are ruling any others hierarchicly.

Chirr