Page 1 of 1

Need A Good CSS Reset

Posted: Sun Oct 05, 2008 5:56 pm
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+.

Re: Need A Good CSS Reset

Posted: Mon Oct 06, 2008 12:50 am
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.