CSS Reset Reloaded Again

Eric Meyer has yet another refined take on a CSS reset technique. Interesting ideas as always from Eric, even though I do not agree on all of it.

For starters, I personally prefer the universal selector (*) to address all objects before doing reset. I also prefer to reset the default rendering of typographic tags such as <strong> and <em>. I’m confused to why Eric added tags like <font> in his universal collection, but not <u>, <i> or other deprecated HTML tags. I found the best way to make clients stop using deprecated typographic tags is to make them “not-working” by removing their default rendering styles.

Anyway, here is my take on a CSS reset that I used in several projects:

[ code removed - outdated example ]

Update!

I refined the reset and made a new reset file that should reset all visual defaults in user agents. That includes anchor colors, deprecated tags, form defaults, etc. Enjoy:

1. * { margin: 0; padding: 0; text-decoration: none; font-size: 100%; outline: none; }
2. code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
3. dfn, i, cite, var, address, em { font-style: normal; }
4. th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
5. a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
6. table { border-collapse: collapse; border-spacing: 0; }
7. caption, th, td, center { text-align: left; vertical-align: top; }
8. body { line-height: 1em; background: white; }
9. q { quotes: "" ""; }
10. ul, ol, dir, menu { list-style: none; }
11. sub, sup { vertical-align: baseline; }
12. a { color: inherit; }

Note: Since IE6 (and IE7 to some extent) has problems with inheritance, the mono-type font face will still show for some tags, even though it shouldn’t. This also applies to the color inheritance for anchors. You could get around this by hacking yourself into the style sheet, but I prefer not to.