How to make HTML written by users on a site, not conflict with the site's stylesheets?

Question

I have a website that allows a user to create blog posts. There are some backlisted tags but most standard HTML tags are acceptable.

However, I'm having issues with how the pages get displayed.

I keep the HTML wrapped in its own div.

I would ultimately like to keep the HTML from the user separate from the main sites stylesheets so it can avoid inheriting styles and screwing up the layout of the originating site where the HTML is being displayed.

So in the end, is there anything I can apply to a div so its contents are quarantined from the rest of the site?

Thanks!

Answer 1

You could use a reset stylesheet to reset the properties for that specific DIV and it’s children. And on the other side, you’ll probably need a CSS parser to adjust the user’s stylesheet for that specific DIV.

Answer 2

You can do it in a frame or an iframe. That will keep it separate in every way.

Answer 3

Could you format each user-generated content with a div of class 'username' in addition to any other classnames you may add automatically?

Then they -I assume 'they'- can format and style as they please, can have all their styles prefaced like so: div.username selector.

Otherwise, you may be able to use iframes.

Answer 4

You could use an iframe to keep them completely separate if you really wanted to be extreme about it.

Or, you could restrict them to only writing inline styles so that they can't affect your page's stylesheet:

1) strip out any style tags html the user creates. This way they can't override your styles.

2) validate their code and either fix or reject things like unclosed tags or elements that shouldn't be inside a div (like head or body tags) and make sure it all gets closed properly so it can't mess up any html from your page after the div it's contained in.