How can I prevent a CSS reset from affecting specific content?
Question
I'm using meyerweb css reset. It works fine, but it resets all default styles, which is in the body and template structure ( <body> , sidebars, etc...) or in the main content (articles)
It's a big problem! because I've styled my text in the editor ( TinyMCE ), but on the main page, it loses all of the styles, such as strong , italic or (un)ordered lists.
How can I solve it? Can I tell the browser to reset all except elements which are in a table or div with a specific class or ID (such as #content )?
Thanks.
3 answers
solution1
5 2012-04-04 17:06:18
You ran across one of the downsides of using reset sheets, in that they reset everything.
You may want to consider using an alternative to full resets, such as normalize.css . The idea behind this is that instead of having all browsers start off at a clean slate, get all of them to the same baseline. From the website:
What does it do?
- Preserves useful defaults, unlike many CSS resets.
- Normalizes styles for a wide range of HTML elements.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle improvements.
- Explains what code does using detailed comments.
This may (or may not) work better for you than the Meyer reset.
solution2
0 2012-04-04 16:58:02
The best way to go about this, in my opinion, would be to re-define the styles after the reset as opposed to removing them from the reset. While you shouldn't see any issues with the elements defined above, removing things like ul and li definitions can result in very inconsistent behavior across browsers. Redefining these elements post-reset will ensure uniformity across browsers.
solution3
0 2012-04-04 17:08:19
[It's influenced by YUI, Eric Meyer & Boilerplate but it doesn't interfear with any typical styling aspects]
It has 6 options commented out. (You only need to amend at least opt 3) you can leave change the others if necessary, the rest should be as expected (in general) unless you're making a website that turns into a car.(Things like forcing vertical scroll, line height, font-size are to your discretion)
The HTML5 elements in CSSesta are more up-to date "currently" than Eric Meyers & will probably become the most frequently maintained reset sheet, I know this because I will be updating it.
(Try it, & if you get any problems let me know I'll look at your default one and meet it in between)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.