meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

CSS Tools: Reset and Diagnostics

I’ve hinted and teased and promised, and I’ve yet to make good on any of it.  I’m sorry.  Can I make it up to you?

Okay, then, here you go: a permanent home for my reset styles.  It takes up residence in a new “CSS” subsection of the Toolbox section of the site, along with my efforts to create a generic set of diagnostic styles.  In the case of the resets, I’ll increment the version number and date whenever I make changes, and probably maintain an archive of previous versions.  Not that I expect that to happen with any frequency, but you never know.

The diagnostics are a lot more experimental and thus aren’t so formal as to have things like version numbers.  If I change anything of specific interest there, I’ll try to write a post about it.  I should get around to writing about the shown-in-page stylesheet one of these days, though I figure anyone can view source and work out the particulars without too much effort.

21 Responses»

    • #1
    • Comment
    • Tue 12 Feb 2008
    • 1458
    D wrote in to say...

    Hi, thanks for sharing. I really appreciate having an up-to-date reset made by a reknowned expert.

    • #2
    • Comment
    • Tue 12 Feb 2008
    • 1615
    Gonzalo wrote in to say...

    That’s great, Eric, they’re really useful, especially the diagnostics one, thank you very much!

    Gonzalo

    • #3
    • Comment
    • Tue 12 Feb 2008
    • 1840
    Josh Walsh wrote in to say...

    Thank you Eric, for making my coding life even easier/lazier.

    • #4
    • Comment
    • Tue 12 Feb 2008
    • 2224
    Alan Bristow wrote in to say...

    Thanks Eric, this is most welcome. I really value a well considered reset approach.

    God[ ] / The Devil [ ] is in the detail so I see this as rather important for consistency from browsers. Hurrah!

    • #5
    • Comment
    • Wed 13 Feb 2008
    • 0715
    Stephen wrote in to say...

    Thanks Eric,

    It would be cool if it had a wee home in svn, for changes and the like?

    • #6
    • Comment
    • Wed 13 Feb 2008
    • 0825
    Jason Crosse wrote in to say...

    Nice one.

    I do have a suggestion, though. To fix inconsistent behaviour in Gecko, I personally add li {-moz-float-edge:content-box;} to my own default stylesheet.

    • #7
    • Comment
    • Wed 13 Feb 2008
    • 1256
    Jason G wrote in to say...

    Quick question, I looked around but did not see an answer, why does a table still need cellspacing=”0″ with the reset styles? I suspect this has to do with IE5 or 6.

    • #8
    • Comment
    • Wed 13 Feb 2008
    • 1325
    Eric Meyer wrote in to say...

    You suspect largely correctly, Jason G. Support for ‘border-spacing’ is not quite as widespread as I’d like, so I left in the reminder. Over time, that will become unnecessary.

    Thanks for the suggestion, Jason C. I’m reluctant to include it given that it will break validation, though I can be talked out of that reluctance. What inconsistent behavior are you fixing with that rule?

    I don’t think I’m going to put this into a version-control system (CVS, Subversion, etc.) other than the one in my head, Stephen. Sorry, but it just seems like massive overkill to me. Maybe I could wiki-ize it, but for that I’d have to set up a wiki. Again, feels like hitting a fly with a cruise missile. Maybe I’ll just run diffs and post them as needed? Dunno.

    To everyone else: you’re welcome, and thanks for your interest and support!

    • #9
    • Comment
    • Wed 13 Feb 2008
    • 1336
    Jason G wrote in to say...

    You suspect largely correctly, Jason G. Support for “border-spacing” is not quite as widespread as I”d like, so I left in the reminder. Over time, that will become unnecessary.

    It is funny because I ran into this exact problem today while fixing some table CSS. IE 7 does not support border-spacing, however, when using border-collapse: collapse, the border spacing is irrelevant. I am unable to test this in IE 6 at the moment.

    The worst table offender has to be the caption element though, I am convinced it is not possible to have identical and correct rendering across the major browsers.

    • #10
    • Comment
    • Sun 17 Feb 2008
    • 1457
    Will Kelly wrote in to say...

    Just noticed a problem with using ‘background: transparent;’ and transparent background PNG’s in IE7. Child elements contained within an element styled in such a way causes the bg to disappear where they overlay, showing through anything below.

    Not that transparent PNG’s don’t have major issues in IE7 anyway (especially in large backgrounds with contained floats), but thought this might be worth noting.

    • #11
    • Comment
    • Tue 19 Feb 2008
    • 1008
    Jason Crosse wrote in to say...

    Thanks for the suggestion, Jason C. I”m reluctant to include it given that it will break validation, though I can be talked out of that reluctance. What inconsistent behavior are you fixing with that rule?

    It’s hard to explain: I was using nested lists, and they would not float as expected (they worked fine in Safari, Opera, IE). Here’s the bug on bugzilla, and here is a very good illustration of the problem.

    • #12
    • Comment
    • Tue 19 Feb 2008
    • 1505
    Neal G wrote in to say...

    I never thought of using CSS in this manner. It never dawned on my when I was the web developer toolbar that I could just write my own customer CSS and tailor it my way.

    I expanded on your ideas and made it my own. Check out my version of CSS Diagnostics. I included a lot of depreciated elements and attributes.

    • #13
    • Comment
    • Wed 5 Mar 2008
    • 0703
    James Hopkins wrote in to say...

    Eric, while I would be in favour of using a more ‘custom’ style reset declaration, I disagree with your decision to use the :before and :after pseudo elements to remove the user-agent generated quote marks from the Q elements, in this particular instance. As per the W3C guidelines, it is the user-agent’s responsibility “… that the content of the Q element is rendered with delimiting quotation marks”.

    While Paul Chaplin most likely had IE6 in mind (and it’s inability to render the necessary delimiting quote marks), an author should not manually include the quote marks (in the form of ampersands or other) in the markup – as I’ve mentioned before, this is the sole responsibility of the user-agent.

    • #14
    • Comment
    • Wed 5 Mar 2008
    • 0814
    Eric Meyer wrote in to say...

    James, I disagree with the W3C’s guidelines in this area, because they assume perfect support for things like generated content and user agents using it by default. That’s kind of like writing a guideline that requies all vector graphics to be done with SVG on the assumption that all user agents support it.

    As I’ve said before, I would no more rely on generated content to insert quotation marks than I would rely on ‘counter’-based automated list numbering in situations where it was important, like legal documents.

    • #15
    • Comment
    • Wed 5 Mar 2008
    • 0848
    James Hopkins wrote in to say...

    Eric, thanks for your reply – interesting to hear your thoughts on the matter.

    Whilst I agree with you in principle, I am with the W3C on this, in that you’re having to remove the default, correct behaviour of standards compliant user-agents in order to achieve cross browser compliancy with regards to inferior browsers (IE7 and below).
    I’m much more in favour for ignoring IE’s need for authors to include specific ampersands in the markup, and rather include a conditional IE style declaration that indicates to the users using IE that it is indeed a short quote – perhaps italic font style? I guess this could be seen as an element of progressive enhancement – default, correct behaviour for standards-compliant UA’s, and a fallback option for users of IE.

    I guess at the end of the day, it comes down to what the author deems the most suitable solution for that partiular instance.

    Just my two cents though.

    • #16
    • Comment
    • Sat 8 Mar 2008
    • 1441
    Doug Gibson wrote in to say...

    Hey Eric. I recently upgraded to your reset.css v1.0 and noticed that the background:transparent doesn’t play well with IE 6 or 7. All of my striped tables with a class applied to the TR no longer show up. This otherwise has always worked cross-browser. I blogged about it a little more in-depth here:

    http://dgibson.net/blog/article.cfm/articleid=10/Meyers-CSS-Reset-v1-0-Doesnt-Play-Well-With-IE

    • #17
    • Comment
    • Mon 10 Mar 2008
    • 1604
    Doug Gibson wrote in to say...

    Thanks for the comment, Eric. That’s an interesting bug I haven’t experienced until now. Your explanation gives me a way to work around it (with descendant selectors) even if I keep the background:transparent too.

    But my question then is what is the purpose of the declaration? Are there any known browser issues (minus NS4, which everyone filters out) with background inheritance that necessitate setting the background explicitly like this? If so, I would definitely keep it in there and put the IE fixes in my iehacks.css. If not, it seems kind of silly to declare it and have to undo it for IE (and on multiple classes and hover states) for no other good reason.

    Thanks for your insights.

    • #18
    • Comment
    • Wed 1 Oct 2008
    • 0152
    Mark S wrote in to say...

    What scares me is how designer CSS is omitting a huge new market – Reset and W3C could have a king-pin role here, if they would only stop smooching in the lockers. CSS Reset is a reliable and invaluable tool that W3C should take very seriously. The politic is so obvious. White faces in corp heaven don’t want to interfere, but … but what? I have found that Eric’s model works well in a plain XHTML frame, however, devices and javascript-dom are pushing reset into a catchup phase. We know W3C should get their “reset” set as desktop standard a.s.a.p. For example, display and clear make unstable inserts for Hendrick’s pinkandyellow.com Carpet due to the latest and greatest js presence. Well, this means Reset should also be de-constructing burgeoning mobile device frames as our sites are now beginning to leak into an entirely new universe. Another example, azimuth should interest GPS techs lapping up next year’s enviro jaunts, yes? Anyone adding ‘critical’ device goodies to the recipe? Anyway, we know you inimicable genii, gracing Eric’s zone and all are already roasting critical corp hotlines and keeping test labs hard at work! … Me? I’m a pilfering novice lost in wonder over things like why that text wrappping around an inline side-bar div on W3 Schools is glaringly absent (DoodlesdeeBee @ css-discuss, 2005 – concurrently we mocked up a lab at mountainclubs.bc.ca) now, three (3) years later. Yes, Reset needs some formal educating. Maintain our communication standards with up front user contact.

    Please do not reset this message!

    • #19
    • Comment
    • Mon 22 Mar 2010
    • 1302
    Stephen R wrote in to say...

    Eric –

    I’m not nearly the CSS expert that you are, but might I humbly suggest you add something like I describe here? :

    http://striderweb.com/nerdaphernalia/2008/01/html-tip-cross-browser-sup-tags/

    It fixes sup tags cross-browser. I suppose similar could be done for sub tags….

    • #20
    • Comment
    • Mon 22 Mar 2010
    • 1327
    Eric Meyer wrote in to say...

    Stephen, the point of a reset is not to enforce one specific technique or another. It’s to create a baseline on top of which you can add your own preferred specific techniques, thus customizing the reset for your own use.

    So take the reset and add the rules for ‘sup’ and ‘sub’ that you like best. Ditto list indentation, heading sizes, body background and foreground colors, and so on. Then use the resulting “reboot” or “baseline” styles—the reset plus what you added—to be your own personal starting point for your projects.

    • #21
    • Comment
    • Thu 13 May 2010
    • 0825
    Onur wrote in to say...

    Nice one.

    I do have a suggestion, though. To fix inconsistent behaviour in Gecko, I personally add li {-moz-float-edge:content-box;} to my own default stylesheet.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


February 2008
SMTWTFS
January March
 12
3456789
10111213141516
17181920212223
242526272829  

Sidestep

Feeds

Extras