prevent meyer reset css to mess with dynamic content

Question

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 want and the reset CSS resets the formatting of their text.

Any ideas how we can prevent reset.css inheritance to propagate to the dynamic content?

All you input is more than welcome.

Magog

It should propagate to all of your styles. That is the point of a reset. If their styles such as bolding text are not showing up, then you are doing something wrong. – Krahling

Bold is showing it'r more table borders and list elements that i'm talking about – Magog

Answer 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.

Verbality

Answer 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.

Djambi

Adding your own is the better bet. The point of the reset is to eliminate things that you don't expect and (more importantly) differences between browser defaults. – Sharkskin

I appreciated your answer. Thanks, but you can i know the rigth value to reset the styles i want? For instance i my case the reset css has table{padding:0px;} and this is messing up with the dynamic content generated by the WYSIWYG. But for me to reset the padding i would have to set a default value which is something i don't knwow what it is. But if i use firebug to debug the styling inheritance if i remove the padding from table reset css works fine...but my point is how can i remove the style property like when i do in firebug ? i mean not override it with some value but remove it – Magog

If you want to leave the styles at the browser default, you need to exclude them from the reset. However, as David says, a better approach is to add your own styling. Perhaps the best solution for you would be to re-introduce the default style from a particular browser? You can find out the default styles for most browsers -- see #214878 -- maybe you should, say, pick Firefox as your preferred "look" and then add its default styles for tables after your reset. – Djambi

Answer 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!!

Coccyx

Appreciated your idea, but for that i would have to reset the value to the system defaults which i don't know. Like for instance table{padding:0px;} in the div.wrap_to_prevent table{padding:[val]px;} so I would need to know the value... i hope i'm thinking correctly...see my point? – Magog

See this link, there's all HTML 4.01/XHTML 1.0 tags and if you click a certain tag, you'll see there default behavior... w3schools.com/tags/default.asp (it's a start) – Coccyx

Answer 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.

Ligature

Good point, but actually is not using any specific css file from cms. Basically i think i need as Zuul wrote to create a custom wrapper div and then use specific css to override values, but my problem is that i don't know the system/browser default values for the elements.... do you think i have to remove the css reset and see the system default values and then apply? – Magog

Answer 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.

Dorthadorthea

Though on that too as a possible workaround, but i have some DOM manipulation with jquery and that wouldn't work. Thanks for your input! – Magog

@Magog You're welcome. DOM manipulation would still work, you can access the contents of an iframe if it's on the same domain. It would only become somewhat more complicated if you have to copy elements across. – Dorthadorthea