Need A Good CSS Reset

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Need A Good CSS Reset

Post by jack_indigo »

Does anyone have a good CSS reset they can recommend, and perhaps a short blurb on why they like it so well? I need to learn from this. I've been using Blueprint CSS for a bit, and I've started to realize it creates bulky XHTML and CSS. Instead, I'd like to use a good reset.css, a good default.css, and then use jQuery's browser API determine whether to load other short CSS tweak files for Safari, Opera, IE6, or IE7+.
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: Need A Good CSS Reset

Post by jack_indigo »

Here's what I ultimately ended up with:

It's a mix of the reset.css that ships with Blueprint CSS, with some other touches to make a test file (thank you Yahoo YUI project) look the same in all browsers I tested.

Code: Select all

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
 
body { 
    line-height: 1.5; 
    font-family: Arial,Helvetica,sans-serif,sans serif,sans;
    font-size: 84%;
    color: #333;
}
 
/* Tables still need 'cellspacing="0"' in the markup. */
table { 
    border-collapse: separate; 
    border-spacing: 0; 
    border-width: 0;
}
caption, th, td { 
    text-align: left; 
    font-weight: normal; 
}
table, td, th { 
    vertical-align: middle; 
}
 
blockquote:before, blockquote:after, q:before, q:after {
    content: ""; 
}
 
blockquote, q { 
    quotes: "" ""; 
}
 
a img { 
    border: none; 
}
 
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}
 
input {
    vertical-align: middle;
    margin-top: 2px;
}
The last 2 parts are my doing -- IE7 wasn't unbolding the h* tags like it was in the other browsers, and the INPUT trick is for FF2 and 3 so that it lines up checkboxes and radio buttons with the text, rather than the bug where the labels are lining up a few pixels downward from these controls.
Post Reply