A Reset.CSS for WebGUI

Every designer out there knows the frustration of creating XTHML and CSS that follows all the rules and standards, only to have the style be broken or unusable in one browser or another.  A reset of default browser styles can be a beneficial tool for those brave souls combating the monster of cross-browser design.  Recently, a few commonly used reset style sheets have popped up on the web, two of the most prominent being Eric Meyer's Reset Reloaded and YUI's Reset CSS.  I personally enjoy using a reset style sheet to wipe the slate clean and to make design act more predictably in problematic browsers, especially Internet Explorer.

However, there is a conflict when it comes to bringing that reset into WebGUI.  This problem arises from the very thing that makes a CMS so useful:  user-entered data.  If a user specifies a certain font size or color, it should appear as such.  Currently the biggest problem I see stems from the way the rich editor handles stylistic application.  If a user makes a chunk of text bold, the rich editor accomplishes this by applying <strong> tags.  The same issue occurs with italics.  Both of the commonly used reset style sheets override these things using the following declarations:

    font-style:normal;
    font-weight:normal;

Likewise, the same problem also occurs when the user applies Heading styles to text.  For instance, making text Heading 2 in the editor will apply an <h2> tag.   This is overridden by another common declaration:

h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}

At this point in time, I have two proposed solutions to this.  The first is to do what I feel the authors of these documents wanted you to do in the first place: enter in your own values.  Resetting all of the headers to be the same size is not beneficial to a CMS that is attempting to abide by user entries.  So specify the h1 to be a font size with bolding, give the h2 a slightly smaller font size and bolding, and so on.  This will give the site consistency without erasing user styles.

My second solution has come to me after some thought.  For me, a reset is a good way to make CSS layouts act predictably across all browsers.  However, style predictably is not nearly as important.  If Firefox displays an <h1> a little smaller than Internet Explorer is that a huge deal to me?  Not really.  As long as everything is still in the correct place and the design looks presentable and professional, minute deviations such as this really are not important.  Under this school of thought, my proposition is simply to omit these problematic resets and use the reset style sheet to only wipe clean layout elements, such as margins and padding.  For WebGUI, this seems like the most agreeable solution.  In that vein, I present you with a preliminary version of reset.css for WebGUI:

/*Based on Eric Meyer's Reset Reloaded*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

body {
    line-height: 1;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}

This is a sufficient starting point for WebGUI sites.  There may be other things you will want to add or alter on a case by case basis.  For instance, on many sites it would be much easier to wipe out bulleted list styling and implement it only where needed.  There are sites where I would definitely consider this, such as when bulleted lists are used multiple times for navigations.

Obviously this is not the the Holy Grail of resetting WebGUI styles.  It should be used or not used, adapted or left alone, as seen fit by the designer on a case by case basis.  Hopefully some will find this to be a useful tool for smoothing out browser differences.

For those interested in some of the thought and work that has gone into choosing reset selectors and how these style sheets have come about, check out Reset Reasoning.