Prevent Meyer Reset Css To Mess With Dynamic Content

I implement the Eric Meyer's reset.css in my website, and works great, but it was a little problem. As this a CMS users are free to format the content of their articles as they wan

Solution 1:

It will always propagate (that's kind of the point of reset.css :)), but if you're not already doing so, you should of course make sure that reset.css is the first stylesheet linked in your pages - any custom styles will then override the reset styles.

If the problem is that the styles are "too reset" and you'd like a more sensible set of defaults (e.g. weighted font sizes, margins, line-height etc.) for your dynamic content you could create your own baseline CSS styles and apply them only to the dynamic content area using an ID selector for example.

Solution 2:

As Eric Meyer himself says on his CSS Reset page:

The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

In other words, this is a starting point, not a self-contained black box of no-touchiness.

By the looks of it, you're finding that the CSS Reset is doing a bit too much for you. I would therefore tweak it for the items you're experiencing problems with. For example, as you're experiencing problems with tables, I would either remove the parts of the CSS reset that target tables, thus leaving it at the browser default, or add extra CSS of your own after the reset to specifically style tables your own way.

Solution 3:

I've had problems like that, my solution for that was to wrap the dynamic content generated by WYSIWYG editors, into a div with a unique class, where to that class I've created a reset style sheet with standard attributes!

Ex.:

div.wrap_to_prevent {style, style, style}

div.wrap_to_prevent input,

div.wrap_to_prevent textarea,

div.wrap_to_prevent h1 {style, style, style}

.

.

etc

Basically, I've used a reset style sheet, but preceded all css style's with the class of my div, that way, it just affects the code inside that div, thus creating a brand new set of rules for that content.

Since 90% of my projects use WYSIWYG editors, with this solution I was able to work around that same problem...

Can't tell if this works for you, but give it a try!!

Solution 4:

Does the CMS create inline styles? If so these should override the styles from the reset.css file.

If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.

Solution 5:

If you need to use the css reset, the only reliable way to work around this is to use an iframe element for the dynamic content. The main problem with iframe s is that they can't be automatically adjusted in height according to the inlying document's size. If you can work around that, I'd say this is the most hassle-free approach.